我正在尝试实现一个文档导航,类似于Bootstrap网站上的文档导航。总体上,我已经实现了它,但有一点让我感到困扰。与Bootstrap一样,我正在使用affix.js和scrollSpy.js的组合,并且这是有效的。请参见以下JSFiddle。
在注释掉e.preventDefault()的情况下,导航菜单的行为符合预期。向下滚动窗口会导致菜单上显示的div被突出显示。单击菜单列表中的项,将直接跳转到页面上相应的div,当您从页面上的该部分滚动时,菜单会相应更新。
在我的“真实”页面上,我有一个高度为100px的固定页眉。因此,当前,当我单击菜单链接时,页面会跳转到所需的部分,并将其放置在页面顶部,其中页眉略微遮挡它。上面的代码中的scrollTop部分似乎不起作用,除非我使用e.preventDefault()。如果您在fiddle中取消对此行的注释并再次运行它,请单击菜单上的“标题3”链接,您将看到它现在将“标题3”内容放在页面上,距离顶部偏移100px。完美。
但是,现在向上滚动页面,靠近顶部时,您会发现“标题3”列表项仍处于:hov状态,即使鼠标远离它也是如此。就好像e.preventDefault()已经阻止浏览器检测到鼠标不再悬停在该项上一样。
单击浏览器窗口外的任何位置,可以解决问题。
$('#doc_nav').on( "click", "a", function( e ){
// e.preventDefault();
var target = this.hash;
var $target = $(target);
var offset = $target.offset().top;
console.log(offset);
offset = offset - 100;
console.log(offset);
$('html, body').scrollTop( offset );
});
在注释掉e.preventDefault()的情况下,导航菜单的行为符合预期。向下滚动窗口会导致菜单上显示的div被突出显示。单击菜单列表中的项,将直接跳转到页面上相应的div,当您从页面上的该部分滚动时,菜单会相应更新。
在我的“真实”页面上,我有一个高度为100px的固定页眉。因此,当前,当我单击菜单链接时,页面会跳转到所需的部分,并将其放置在页面顶部,其中页眉略微遮挡它。上面的代码中的scrollTop部分似乎不起作用,除非我使用e.preventDefault()。如果您在fiddle中取消对此行的注释并再次运行它,请单击菜单上的“标题3”链接,您将看到它现在将“标题3”内容放在页面上,距离顶部偏移100px。完美。
但是,现在向上滚动页面,靠近顶部时,您会发现“标题3”列表项仍处于:hov状态,即使鼠标远离它也是如此。就好像e.preventDefault()已经阻止浏览器检测到鼠标不再悬停在该项上一样。
单击浏览器窗口外的任何位置,可以解决问题。
有人能解释一下我在这里做错了什么吗?我如何防止锚点点击的默认行为,以便控制页面滚动位置,同时不会停止正确的CSS绘画过程?
问题出现是因为我正在使用e.preventDefault()来阻止浏览器的默认行为,因为我想控制滚动到锚定元素。
我已在Firefox和IE10中进行了测试。