Браузер прокручивает странное поведение для липкого навигационного меню

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/