Hello and welcome to this great tutorial, recently we post just resources and decided its time for tutorials now ! Learn how to set you header in fixed position while you scroll down with no content jumping. This is all you ever need for that matter. You can also download the source and go by that, if its more easy for you.

First things first, linking the scripts: skrollr.js and jquery-latest.

<!-- Latest JQuery --> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- Skrollr --> <script type="text/javascript" src="js/skrollr.js"></script>

Now its time for the HTML markup, lets say you have a simple navigation wrapped in a container with a class .navigation and a simple splash container to push the navigation down to simulate real situation. Now, you need to adjust the placeholder div padding according to your content:

<div class="splash"></div><!-- Splash --> <div id="navigation" class="navigation-bar" data-0="position:static;opacity:0;" data-1000="opacity:1;" data-top-top="position:fixed;top:0;" data-edge-strategy="set"> <div class="content"> <nav> <ul class="navigation" id="nav"> <li data-0="opacity:0;" data-500="opacity:1;"> <a href="#home"> <i class="fa fa-home"></i> <strong>Home</strong> <small>Get Me Home</small> </a> </li> <li data-0="opacity:0;" data-500="opacity:1;"> <a href="#about-us"> <i class="fa fa-edit"></i> <strong>About us</strong> <small>Read About Us</small> </a> </li> <li data-0="opacity:0;" data-500="opacity:1;"> <a href="#portfolio"> <i class="fa fa-eye"></i> <strong>Portfolio</strong> <small>Examples Of Our Work</small> </a> </li> </ul> </nav> <div id="clear"></div> </div><!-- Content --> </div><!-- Navigation Bar --> <!--placeholder div to prevent jumpy content when nav gets pinned--> <div style="padding:84px;" data-0="display:none;" data-top-top="display:block;" data-anchor-target="#navigation" data-edge-strategy="set"> </div>

Next, you need to add this initialization code for skrollr just before the closing </body> tag:

<!-- Skrollr --> <script type="text/javascript"> var s = skrollr.init({ edgeStrategy: 'set', forceHeight: false, smoothScrolling: false, easing: { WTF: Math.random, inverted: function(p) { return 1-p; } } }); </script>

And finally a simple CSS style for our navigation and splash container:

.splash { width:100%; height:300px; background:#CCC; } /* Navigation */ #navigation { width:100%; margin:0px 0px 0px 0px; } .navigation { height:100px; list-style: none; padding: 0; margin:0px 0px 0px 0px; background:none; float:none; background:#000; } .navigation li { float: left; position: relative; line-height:14px; } .navigation li a { display: block; text-decoration: none; padding: 12px 20px; text-align: center; color:#e67e22; } .navigation li a i { display: block; font-size: 30px; margin-bottom: 10px; color:#555A71; } .navigation li a strong { display: block; text-transform: uppercase; color:#F26464; font-weight:normal; } .navigation li a small { display: block; font-size: 10px; color:#FFF; } .navigation li:hover > a { color: #e67e22; } .navigation li:hover { position: relative; color: #000; border:0; border-bottom: 3px solid #F26464; margin-top: -3px; transform: scale(0.9); } .navigation li.active { position: relative; color: #e67e22; border:0; border-bottom: 4px solid #F26464; margin-top: -4px; } .navigation li a.active { position: relative; color: #e67e22; border:0; border-bottom: 4px solid #F26464; margin-top: -4px; }

Download

Demo