浏览器滚动奇怪的行为粘滞导航菜单

Question

我想创建粘滞的导航菜单，应该在页面底部时，网站加载和滚动时向上移动。当滚动菜单到达顶部时，该菜单应该保持在页面顶部。现在它工作并坚持下去。但是，当您缓慢滚动时会出现问题。它比它应该增加，只有在一些像素返回到它的位置后。请注意，快速滚动时不会再现此行为！什么可能导致这种“过度滚动”，以及有什么建议让它在达到顶部时停止移动？

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/

Answer 1

。在你的代码中的小错字。 ...

var menu_height = $('.menu').height(); 

你错过了。获得一级菜单

参见：

http://jsfiddle.net/6JZf8/1/