Home » Layouts » Creating Fixed Header / Navigation On Scroll Down Using skrollr.js

Creating Fixed Header / Navigation On Scroll Down Using skrollr.js

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">&nbsp;</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

 

 

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top