STICKY MENU

by Mahbub Alam

HTML

<header>
  <div class="logo">STICKY MENU ON SCROLL!</div>
  <div class="intro">Some dumbass tagline goes here</div>
  <div class="menu">Menu goes here - home - links - blah blah</div>
</header>

<div class="content" style="height:1000px;"></div>

CSS

.menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;}
.fix-list-title-bar{
	background: red none repeat scroll 0 0;
    margin-top: -25px;
    position: fixed;
    width: 77.1%;
    z-index: 9;
}

JavaScript

$(document).ready(function(){
	   $(window).scroll(function() {
		if ($(this).scrollTop() > 100) {
            $( ".menu" ).addClass( "fix-list-title-bar" );
		} else {
            $( ".menu" ).removeClass( "fix-list-title-bar" );
		}
	});
});