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

i try implement "pure" css solution or javascript way add offset matjax anchor links on equations.

when scroll down on page, fixed top menu appears. handle behavior 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);       });      }       });      

everything works fine now, add functionality have offset when click on anchor links mahjax equations ( happens when have \eqref references html page refer mathjax equations).

from this link, tried use pure css solution adding in css style :

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

i have set a[name*="mjx"] because pattern "mjx" appears when mouse on mathjax anchor links (with firefox).

but solution doesn't seem work.

i have add directly \begin{equation} environnement \cssid{anchor_eq}{my equation} instruction, :

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

but without success.

if see solution, nice,

thanks in advance.

update 1 :

i have tried set davide cervone said.

noticing target link of anchor shows (in inspector) :

<div class="mathjax_display"></div> 

so have added following css (after mathjax loaded):

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

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

i keep on searching solution.

if wait make change <a> tags until after mathjax runs, code pick mathjax links , won't have handle them separately. 1 way replace $(window).bind("load", function () { mathjax.hub.queue(function () { (provided appears after <script> loads mathjax.js itself).