我正在尝试创建粘性导航菜单,该菜单应在网站加载时位于页面底部并在滚动时向上移动。当导航菜单在滚动时到达顶部时,它应该粘在页面顶部。现在它可以工作并坚持下去。但是当您缓慢滚动时会出现问题。只有在一些像素返回到它的位置之后,它才会比它应该上升的多。请注意,快速滚动时不会重现此行为!这种“过度滚动”的原因是什么?有什么建议可以让它在恰好到达顶部时停止移动?
html代码
<div class="menu"></div>
CSS代码
body {
margin: 0;
padding: 0;
height: 2000px;
}
.menu {
position: absolute;
width: 100%;
height: 100px;
background: orange;
top: auto;
bottom: 0;
}
.fixed_menu {
position: fixed;
top: 0;
bottom: auto;
}
jQuery代码
var menu_height = $('menu').height();
$(window).scroll(function(e){
e.preventDefault();
var window_height = $(window).height();
var window_scroll = $(window).scrollTop();
if(window_scroll >= window_height - menu_height){
$('.menu').addClass("fixed_menu");
}else{
$('.menu').removeClass("fixed_menu");
}
});
jsfiddle 示例http://jsfiddle.net/6JZf8/