Problems with menu fixed top on scroll, when html document not enough height?

Question

I do a menu fixed top when scroll, it ok with some pages have large height, but in page has not enough height, this script loop:

Example:

I have menu with height 50px and i write a script:

if ($(this).scrollTop() > 50){
    // add class fixed
} else { //remove class }

• on pages with large height this run: scroll(over 50px) > add class
• on pages with small height this run: scroll(over 50px) > add class > remove class

Please see this example: http://jsfiddle.net/F4BmP/2930/

Answer 1

Finally, i find a solution for my problem.

Reason make problem is HTML document lost height when menu change from static to fixed.Examble: Browser has 500px and has a scrollbar, when user scroll my menu change to fixed and browser lost 50px of menu, so browser not enough height to has scrollbar, it will return to top page and do code lines in ELSE statement.

So i add a div wrap my menu and set height the same height with my menu, this will make the height of document always the same on before and after scroll:

<div id="wrap" style="height:50px;width:100%">
      <div id="mymenu"></div>
</div>

This solution solve my problem.