我希望实现一个类似于此页面左侧导航的固定菜单:http://getbootstrap.com/2.3.2/scaffolding.html。我的菜单是一个具有
我查看了一些资料发现,当偏移顶部值在隐藏元素上时,或者它存在边距问题时,偏移顶部值可能会出错,但事实上,在这里我没有任何复杂的结构,只有一个单一可见的
如有帮助解决此问题的相关信息,将不胜感激!谢谢!!
position:relative
(我也尝试过static
)属性的nav
元素,当它到达视口的顶部时,变为fixed
状态。以下是我的功能代码:$(document).ready(function() {
function stickyNav() {
var elementPosition = $('nav').offset();
console.log(elementPosition);
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('nav').addClass("sticky");
} else {
$('nav').removeClass("sticky");
}
});
}
stickyNav();
}); //document ready
console.log(elementPosition);
返回的偏移顶部值是错误的,大约为1200px,但如果我调整页面大小,值会更改为大约650px,这才是正确的偏移顶部值,函数才能按照其预期执行。我查看了一些资料发现,当偏移顶部值在隐藏元素上时,或者它存在边距问题时,偏移顶部值可能会出错,但事实上,在这里我没有任何复杂的结构,只有一个单一可见的
nav
元素。如有帮助解决此问题的相关信息,将不胜感激!谢谢!!