Top Fixed Menu Bar on Scroll

1.jQuery Library add
2.html:

<div class="nav-container">
	 <div class="nav">
		  <ul>
			   <li><a href="">Menu I</a></li>
			   <li><a href="">Menu II</a></li>
			   <li><a href="">Menu III</a></li>
		  </ul>        
	 </div>
</div>

3.CSS

.fix-nav {
/* this make our menu fixed top */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
 
.fix-body {
/* this will adjust body top margin to prevent content jumping when nav gets fix  */
    margin-top: 50px;
/* adjust as per height of your menu */;
}
.nav-container {
    background-color: #f86d5a;
}

4.js

<script>
$(window).scroll(function () {
     if ($(this).scrollTop() > 250) {
          $('.nav-container').addClass("fix-nav");
  $('body').addClass("fix-body");
     } else {
  $('.nav-container').removeClass("fix-nav");
  $('body').removeClass("fix-body");
     }
});
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s