Sticky Navigation using Jquery

In this tutorial, I'll show you how to make Sticky Navigation using Jquery.

Click Here for DEMO

First thing, we need HTML to create the navigation and some content so that the page will scroll to the bottom. Here is the code:

HTML
<h2>Sticky Navigation</h2>
<p>Scroll Down to check sticky nav to stay at the top of the page.</p>
<nav id="nav">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</nav>
<div class="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, in accusamus necessitatibus, libero enim asperiores maxime ab adipisci nemo quaerat modi, deleniti a non assumenda consequatur. Esse eos beatae debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum magnam, unde hic fuga inventore perspiciatis commodi tempore quam sed eos eius ut repellat impedit iste reprehenderit eaque numquam delectus!</p>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
#nav{
   position: absolute;
   left: 0;
   right: 0;
   z-index: 1;

   &.sticky{
      position: fixed;
      top: 0;
   }

   ul{
      @extend %listreset;
      background: $light-blue;
      max-width: 640px;
      margin: 0 auto;
   }

   li{
      display: inline-block;
      vertical-align: top;
   }

   a{
      color: $white;
      display: block;
      padding: 10px 20px;
      transition: opacity 0.3s linear;
      -webkit-transition: opacity 0.3s linear;

      &:hover{
         text-decoration: none;
         opacity: 0.6;
      }
   }
}

.content{
   padding: 70px 0 0;
}

Finally, we need Jquery Code to make sticky navigation for your project. So, here's the Jquery below.
Jquery
$(function(){
 var stickyNavTop = $('#nav').offset().top;
 var stickyNav = function() {
  var scrollTop = $(window).scrollTop();
  if(scrollTop > stickyNavTop) {
   $('#nav').addClass('sticky');
  } else {
   $('#nav').removeClass('sticky');
  }
 };
 $(window).scroll(function(){
  stickyNav();
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts