Mathjax - 当有顶部固定菜单时,为方程的目标“\eqref”link 添加偏移量
Mathjax - Add offset for the target "\eqref" link of equation when there is a top fixed menu
我尝试用 "pure" CSS 解决方案或 Javascript 方法来实现
为等式上的 Matjax 锚 links 添加偏移量。
当我在页面上向下滚动时,会出现一个固定的顶部菜单。我用 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 方程的锚点 links 时我可以有一个很好的偏移量(当我有 \eqref
引用到我的 HTML 页面,引用 MathJax 方程)。
从 this link 开始,我尝试通过添加 CSS 样式来使用纯 CSS 解决方案:
a[name*="mjx"] {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
我设置了 a[name*="mjx"]
,因为当鼠标悬停在 Mathjax 锚点 links(使用 Firefox)时会出现模式“mjx
”。
但这个解决方案似乎不起作用。
我还必须直接在 \begin{equation}
环境中添加一条 \cssId{anchor_eq}{my equation}
指令,其中:
#anchor_eq {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
但没有成功。
如果有人能看到解决方案,那就太好了,
提前致谢。
更新 1:
我已经尝试设置 Davide Cervone 所说的。
注意到锚点的目标 link 显示为(在检查器中):
<div class="MathJax_Display"></div>
所以我添加了以下内容CSS(加载 MathJax 之后):
.MathJax_Display {
display: block;
content: "";
margin-top: -100px;
height: 100px;
visibility: hidden;
}
但这不起作用,点击标签 links(即 \eqref
)后,方程式仍然被顶部固定菜单隐藏。
我一直在寻找解决方案。
如果您等到在 MathJax 运行后才对<a>
标记进行更改,那么您的代码也会获取MathJax 链接,您将不会'不必单独处理它们。一种方法是将 $(window).bind("load", function () {
替换为 MathJax.Hub.Queue(function () {
(前提是它出现在加载 MathJax.js 本身的 <script>
之后)。
我尝试用 "pure" CSS 解决方案或 Javascript 方法来实现 为等式上的 Matjax 锚 links 添加偏移量。
当我在页面上向下滚动时,会出现一个固定的顶部菜单。我用 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 方程的锚点 links 时我可以有一个很好的偏移量(当我有 \eqref
引用到我的 HTML 页面,引用 MathJax 方程)。
从 this link 开始,我尝试通过添加 CSS 样式来使用纯 CSS 解决方案:
a[name*="mjx"] {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
我设置了 a[name*="mjx"]
,因为当鼠标悬停在 Mathjax 锚点 links(使用 Firefox)时会出现模式“mjx
”。
但这个解决方案似乎不起作用。
我还必须直接在 \begin{equation}
环境中添加一条 \cssId{anchor_eq}{my equation}
指令,其中:
#anchor_eq {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
但没有成功。
如果有人能看到解决方案,那就太好了,
提前致谢。
更新 1:
我已经尝试设置 Davide Cervone 所说的。
注意到锚点的目标 link 显示为(在检查器中):
<div class="MathJax_Display"></div>
所以我添加了以下内容CSS(加载 MathJax 之后):
.MathJax_Display {
display: block;
content: "";
margin-top: -100px;
height: 100px;
visibility: hidden;
}
但这不起作用,点击标签 links(即 \eqref
)后,方程式仍然被顶部固定菜单隐藏。
我一直在寻找解决方案。
如果您等到在 MathJax 运行后才对<a>
标记进行更改,那么您的代码也会获取MathJax 链接,您将不会'不必单独处理它们。一种方法是将 $(window).bind("load", function () {
替换为 MathJax.Hub.Queue(function () {
(前提是它出现在加载 MathJax.js 本身的 <script>
之后)。