瀏覽器滾動奇怪的行爲粘滯導航菜單

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/