Mathjax -为目标添加偏移量"eqref"链接方程时,有一个顶部固定菜单

Mathjax - Add offset for the target "eqref" link of equation when there is a top fixed menu

本文关键字:quot 有一个 顶部 菜单 方程时 链接 偏移量 添加 eqref Mathjax 目标      更新时间:2023-09-26

我尝试用"纯"CSS解决方案或Javascript实现一种方式为方程上的Matjax锚链接添加偏移量。

当我向下滚动页面时,会出现一个固定的顶部菜单。我用Javascript像这样处理这个行为:

$(window).bind("load", function () {
  $('a[href*="#"]').click(function(event) {
    event.preventDefault();
    if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    var hash = this.hash;
    $('html,body').animate({ scrollTop: target.offset().top - 55 }, 300, function() {
      href = window.location.href;
      history.pushState({page:href}, null, href.split('#')[0]+hash);
    });
    return false;
  }
  }
  });
  $(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
    var target = window.location.href.split('#');
    var href = target[0];
    if (state) {
      $('html,body').animate({ scrollTop: 0 }, 300, function() {
      history.replaceState({}, null, href);
      }); 
    }    
  });     

一切都很好,但现在,我想添加一个功能,当我点击MahJax方程的锚链接时,我可以有一个很好的偏移量(这发生在我有'eqref引用到我的HTML页面时,引用MathJax方程)。

从这个链接,我试图使用一个纯CSS解决方案,通过添加我的CSS样式:

a[name*="mjx"] {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}

我已经设置了a[name*="mjx"],因为模式"mjx"出现时,鼠标在Mathjax锚链接(Firefox)。

但是这个方法似乎行不通。

我还必须直接在'begin{equation}环境中添加'cssId{anchor_eq}{my equation}指令,使用:

#anchor_eq {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}

但没有成功。

如果有人能找到解决办法,那就太好了,

提前感谢。

UPDATE 1:

我试着把戴维·切尔沃内说过的话放在一起。

注意到锚的目标链接显示为(在检查器中):

<div class="MathJax_Display"></div>
所以我添加了以下CSS(在MathJax加载之后):
.MathJax_Display {
display: block;
content: "";
margin-top: -100px;
height: 100px;
visibility: hidden;
}

但这不起作用,点击标签链接后(即'eqref),方程仍然隐藏在顶部固定菜单。

我一直在寻找解决办法。

如果您等到 MathJax运行之后才对<a>标记进行更改,那么您的代码也将拾取MathJax链接,而不必单独处理它们。一种方法是用MathJax.Hub.Queue(function () {替换$(window).bind("load", function () {(前提是它出现在加载MathJax.js本身的<script>之后)。

相关文章: