How to create Fixed Menu When Scrolling Page with CSS and jQuery

HTML

<div class="nav-container">

<div class="nav">

    <ul>

        <li><a href="">Home</a></li>

        <li><a href="">CSS</a></li>

        <li><a href="">PHP</a></li>

        <li><a href="">SEO</a></li>

        <li><a href="">jQuery</a></li>

        <li><a href="">Wordpress</a></li>

        <li><a href="">Services</a></li>

    </ul>

    <div class="clear"></div> /*clear floating div*/

</div>

</div>

 

CSS

 

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}

    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

    

.nav { height: 42px;}

    .nav ul { list-style: none; }

    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}

    .nav ul li:first-child{ padding-left: 0;}

    .nav ul li a { }

    .nav ul li a:hover{ text-decoration: underline;}

 

JQUERY

 

jQuery("document").ready(function($){
   
    var nav = $('.nav-container');
   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });

});