jquery - Browser scroll strange behaviour for sticky nav menu -

I am trying to create a sticky nav menu that should be at the bottom of the page when the website loads and scrolls While scrolling, the page should stay on top of the page when it reaches the top page. Now it works and sticks but the problem occurs when you scroll slowly, it gets more than that and only after coming back to a few pixels. Note that this behavior is not re-presented while scrolling fast! What can be the reason for that "overscrolling" and what is the suggestion to prevent it from running on the right to the top?

html code

  & lt; Div class = "menu" & gt; & Lt; / Div & gt;   
 CSS code  
  body {margin: 0; Padding: 0; Height: 2000px; } Menu {status: absolute; Width: 100%; Height: 100 pixels; Background: orange; Top: Auto; Bottom: 0; }. Fixed_menu {status: fixed; Top: 0; Bottom: Auto; }   
 jquery code  
  var menu_height = $ ('menu'). Height (); $ (Window) .scroll (function (e) {e.preventDefault (); var window_height = $ (window) .height (); var window_scroll = $ (window) .scrollTop (); if (window_scroll> gt; = window_height - Menu_height) {$ ('Menu') AddClass ("fixed_menu");} and {$ ('. Menu'). RemoveClass ("fixed_menu");}});   
 jsfiddle example   
 
 
 There is a small typo in your code. .  
  var menu_height = $ ('Menu') height ();