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

Question

I try to implement with "pure" CSS solution or with Javascript a way to add an offset for Matjax anchor links on equations.

When I scroll down on my page, I get a fixed top menu that appears. I handle this behavior with Javascript like this :

$(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);
      }); 
    }    
  });

Everything works fine but now, I would like to add a functionality with which I could have a good offset when I click on anchor links for MahJax equations ( this happens when I have \eqref references into my HTML page that refer to MathJax equations).

From this link, I tried to use a pure CSS solution by adding in my CSS style :

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

I have set a[name*="mjx"] because the pattern "mjx" appears when mouse is over Mathjax anchor links (with Firefox).

But this solution doesn't seem to work.

I have also to add directly into \begin{equation} environnement a \cssId{anchor_eq}{my equation} instruction, with :

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

but without success.

If anyone could see a solution, this would be nice,

Thanks in advance.

UPDATE 1 :

I have tried to set what Davide Cervone said.

Noticing that target link of anchor shows as (in inspector) :

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

So I have added the following CSS (after MathJax is loaded):

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

But this doesn't work, after clicking on label links (i.e \eqref), equations are still hidden by top fixed menu.

I keep on searching a solution.

You definitely don't want to add `visibility:hidden`. In any case, it looks like things are working as expected. I'm guessing you run into a general difficulty (independent of the offset problem): the links will point to the equation label (which is the correct behavior since there might be multiple labels). This means the browser will only scroll the label into view -- and other parts of the equations might remain cut off. I don't think there's a silver bullet for this; you can either add a fixed amount of extra offset to make it look better or design something for your specific content. — Peter Krautzberger, Sep 12 '16 at 07:40

score 1 · Accepted Answer · answered Sep 08 '16 at 11:24

If you wait to make your change to the <a> tags until after MathJax runs, then your code will pick up the MathJax links as well and you won't have to handle them separately. One way would be to replace $(window).bind("load", function () { with MathJax.Hub.Queue(function () { (provided this appears after the <script> that loads MathJax.js itself).

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

1 Answers1