<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="sticky_navigation_wrapper"> <div class="sticky_navigation"> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> </div> </div> </div> </div>

.wrapper { height:1000px; padding-top: 50px; } .sticky_navigation_wrapper { width: 100%; height: 85px; } .sticky_navigation { top: 0; left: 0; z-index: 10000; width: 100%; background: #fff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .headerfixed { position: fixed; top: 0; left: 0; z-index: 100000; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .headerrelative { position: relative; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .headerrelative .navbar { padding:10px 0px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .headerfixed .navbar { padding:0px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .navbar-default { background-color: #54a506; border-color: #54a506; } .navbar-default .navbar-nav>li>a, .navbar-default .navbar-brand { color:#fff; }

$(document).ready(function () { var sticky_navigation_offset_top = $('.sticky_navigation').offset().top; var sticky_navigation = function () { var scroll_top = $(window).scrollTop(); if (scroll_top > sticky_navigation_offset_top) { $('.sticky_navigation').addClass("headerfixed"); $('.sticky_navigation').removeClass("headerrelative"); } else { $('.sticky_navigation').removeClass("headerfixed"); $('.sticky_navigation').addClass("headerrelative"); } }; sticky_navigation(); $(window).scroll(function () { sticky_navigation(); }); });