You are on page 1of 1

<style>.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%;} /* th
is 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 sol
id #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
</style>
<body>
<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>
</body>
<script>
jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});

});</script>

You might also like