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