How to make navigation menu stay at the top of the page while scrolling only?

Question

I have created a navigation menu with ul > li .
The menu is actually at the center of the page.
What I want is, only while scrolling, my menu stays at the top of the page.

I can do it using css

.menu {
  position:fixed;
  top:0;
  float:left;
}
.menu li {
  float:left;
  padding:10px;
  margin:2px;
}

But actually I need when I scroll only. Can any one suggest some solution :)

Answer 1

Try this:-

<script>
$(document).ready(function(){

    // hide targeted element first
    $("#xg_navigation").hide();

    // fade back in targeted element
    $(function () {
        $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
           $('#xg_navigation').fadeIn();
        } else {
           $('#xg_navigation').fadeOut();
        }
    });
});

});
</script>

Answer 2

You can do something like this:

$(window).scroll(function() {
    if ($(document).scrollTop() > 100)
    {
       $('.menu').addClass('fixed');
    }
});

css:

.fixed{position:fixed;}

remember to remove class fixed form .menu when user scrolls back to top of the page.