Question

我尝试使用＆＃34; pure＆＃34; 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方程的锚链接时，我可以有一个很好的偏移（当我在我的HTML页面中有\eqref引用时会发生这种情况参考MathJax方程式。

从this link开始，我试图通过添加我的CSS样式来使用纯CSS解决方案：

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

我设置了a[name*="mjx"]，因为模式＆＃34; mjx＆＃34;鼠标悬停在Mathjax锚链接（使用Firefox）时出现。

但是这个解决方案似乎无法发挥作用。

我还要直接添加\begin{equation} environnement \cssId{anchor_eq}{my equation}指令，其中包含：

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

但没有成功。

如果有人能看到解决方案，那就太好了，

提前致谢。

更新1：

我试图设定Davide Cervone说的话。

注意到锚点的目标链接显示为（在检查员中）：

<div class="MathJax_Display"></div>

所以我添加了以下CSS（加载MathJax之后）：

.MathJax_Display {
display: block;
content: "";
margin-top: -100px;
height: 100px;
visibility: hidden;
}

但是，在点击标签链接（即\eqref）之后，这不起作用，方程仍然被顶部固定菜单隐藏。

我一直在寻找解决方案。

Answer 1

如果您等到运行MathJax之前的，则等待更改<a>代码，那么您的代码也将获取MathJax链接，并且您不必单独处理它们。一种方法是将$(window).bind("load", function () {替换为MathJax.Hub.Queue(function () {（假设这出现在加载MathJax.js本身的<script>之后）。

Mathjax - 为目标添加偏移量＆＃34; \ eqref＆＃34;有顶部固定菜单时的等式链接

1 个答案: