Sticky Navigation bar using Jquery

In this article, I’m going to explain about — how to create the Sticky Navigation bar. Which is very interesting animation effect and which we can see quite often in many websites and which gets sticky nature on scrolling the window bar.

Today we are going to explore three different kinds of the Sticky Navigation bars.

Normal Sticky Navigation bar
ZoomIn – ZoomOut Sticky Navigation bar
ZoomIn – ZoomOut Sticky Navigation bar with Logo

What is Sticky Navigation bar?

Sticky Navigation Bar is a Navigation bar which works on the scrolling of the window bar and whenever we move the scroll bar of the window to above certain value, then the Navigation bar becomes sticky and gets fixed at top of the browser and then when we move the scroll bar of the window to below the certain value, then the Navigation bar moves back to the initial position.

Before digging into the code, you guys should know the few basic Jquery methods and properties, so to understand this demo smoothly.

So, now let me explain about the Jquery methods and properties with examples.

scroll event: The scroll event occurs, whenever the visitor scrolls on the specified element and The scroll event works for all scrollable elements and for the browser.

scroll event has two methods
1. scrollTop()
2. scrollLeft()

scrollTop(): The scrollTop property sets or returns the number of pixels an element’s content is scrolled vertically.
scrollLeft(): The scrollLeft property sets or returns the number of pixels an element’s content is scrolled horizontally.

Now let me explain about the scroll event, scrollTop(), scrollLeft() methods with an example.

Scroll Event:

Here I’m not going to explain about HTML and CSS deeply, Mostly I’m going to focus on Jquery. First, consider the two div elements with two different classes(class:content, class:result). style the div element with class:content by giving specific width, height and overflow:scroll so that we get the vertical scroll bar. and set the display:none of the div element with class:result.

whenever the document is ready and with the help of DOM(Document Object Model) we are taking the control over the div with class:content and class:result. Now, whenever the scroll bar is triggered and function inside that will get executed.

/* Jquery code */
$(document).ready(function(){
   $(".content").scroll(function(){
      $(".result").css('display','inline').fadeOut(1000);
   });
});

ScrollTop() Method:

First, consider the two div elements with two different classes(class:content1, class:scrolltop). style the div element with class:content1 by giving specific width, height and overflow:scroll so that we get the vertical scroll bar.

whenever the document is ready and with the help of DOM(Document Object Model) we are taking the control over the div with class:content1 and class:scrolltop. Now, whenever the scroll bar is triggered and the scrollTop() method will calculate the value it scrolled and it assigns into one variable and displays that value.

/* Jquery code */
$(document).ready(function(){
  $(".content1").scroll(function(){
    var top = $(this).scrollTop();
    $(".scrolltop").html(top);
  });
});

ScrollLeft() Method:

First, consider the two div elements with two different classes(class:content2, class:scrollleft). style the div element with class:content2 by giving specific width, height and overflow:auto; and white-space:nowrap; so that we get the horizontal scroll bar.

whenever the document is ready and with the help of DOM(Document Object Model) we are taking the control over the div with class:content2 and class:scrollleft. Now, whenever the scroll bar is triggered and the scrollLeft() method will calculate the value it scrolled and it assigns into one variable and displays that value.

/* Jquery code */
$(document).ready(function(){
  $(".content2").scroll(function(){
    var left = $(this).scrollLeft();
    $(".scrollleft").html(left);
  });
});

Checkout the demo.

See the Pen scroll – scrollTop() – scrollLeft() by rajeshdn (@cool_lazyboy) on CodePen.0

offset() method: The offset() method set or returns the offset coordinates for the selected elements, relative to the document.

offset() method has top and left properties.
offset().top: It calculates the vertical distance between the specified elements.
offset().left: It calculates the horizontal distance between the specified elements.

Now let me explain about the offset().top, offset().left properties with an example.

offset().top:

First, consider the div element with class:wrapper and inside that consider the header and nav and style it. Now, To find the offset top value of nav, we need to use the offset().top property.

/* Jquery code */
$(document).ready(function(){
  $(".offsettop").click(function(){
    var offsettopvalue = $("nav").offset().top;
    alert(offsettopvalue);
  });
});

offset().left:

First, consider the div element with class:wrapper and inside that consider the header and nav and style it. Now, To find the offset left value of p element inside the header element, we need to use the offset().left property

/* Jquery code */
$(document).ready(function(){
$(".offsetleft").click(function(){
var offsetleftvalue = $("header p").offset().left;
alert(offsetleftvalue)
});
});

Checkout the demo.

See the Pen offset – offset().top – offset().left by rajeshdn (@cool_lazyboy) on CodePen.0

Come, Let’s start the coding

Normal Sticky Navigation bar

As I mentioned above, Here I’m focusing only on Jquery code. so I’m going to explain briefly about HTML and CSS part.

Consider the div element with class:wrapper and inside that consider the header, nav and ul elements and one more div for content and style it.

whenever the document is ready and with the help of DOM(Document Object Model) we are taking the control over the nav bar and scroll bar of the window
To find the offset top value of the nav, we need to use the offset().top property and assign the calculated value to the variable named offsetheight.
```
var offsetheight = $("nav").offset().top;
```
With the help of This Jquery property, target the window scroll bar, whenever the scroll bar of the window is scrolled. the scroll event gets triggered and the function inside that will get executed.
```
$(this).scroll(function(){
    .............................
    here goes the code which is going to execute.
    .............................
});
```
Now find the scroll bar top value using scrolltop() and assign its value to the variable named scrolltopvalue.
```
var scrolltopvlaue = $(this).scrollTop();
```
Now by using the if else condition statement, we can achieve the sticky navigation bar effect. if the scrolltopvalue is greater than or equal to the value of offsettopvalue. then it adds the fixed class to the nav element. class:fixed has the position:fixed; and top:0; so that navigation bar gets fixed at the top of the browser.
```
 if(scrolltopvlaue >= offsettopvalue)
 {
    $("nav").addClass("fixed")
 }
 
.fixed{
  position: fixed;
  top:0;
}
```
Now by using the else part, whenever the scrolltopvalue is less than the value of offsettopvalue. then it removes the fixed class from the nav element. and then the navigation bar moves back to the initial position.
```
    
else
{
   $("nav").removeClass("fixed")
}
```

Jquery full code

$(function(){
 var offsettopvalue = $("nav").offset().top;
 
  $(this).scroll(function(){
      var scrolltopvlaue = $(this).scrollTop();
    
      if(scrolltopvlaue >= offsettopvalue)
      {
        $("nav").addClass("fixed")
      }
      else
     {
       $("nav").removeClass("fixed")
     }
  });
});

See the Pen sticky navigation bar by rajeshdn (@cool_lazyboy) on CodePen.0

ZoomIn – ZoomOut Sticky Navigation bar

Just go through the above steps and In ZoomIn – ZoomOut Sticky Navigation bar, Initially the Height, fontsize, line-height of Navigation bar will be height:75px;, line-height: 75px;, font-size: 20px; and whenever the scroll bar gets triggered, the function inside it gets executed.

Now by using the if else condition statement, we can achieve the ZoomIn – ZoomOut Sticky Navigation effect. if the scrolltopvalue is greater than or equal to the value of offsettopvalue. then it adds the fixed class to the nav element. class:fixed has the position:fixed;, top:0; and height:50px;. so that the navigation bar height decreases from 75px to 50px and gets sticky at the top of the browser.

For the proper ZoomIn – ZoomOut effect, we should set the line-height:50px; and font-size:16px;.

 .fixed {
  position: fixed;
  top: 0;
  height: 50px;
}
.fixed li {
  line-height: 50px;
}
.fixed li a {
  font-size: 16px;
}

Now by using the else part, whenever the scrolltopvalue is less than the value of offsettopvalue. then it removes the fixed class from the nav element. and the navigation bar moves back to the initial position.
There is no change in the Jquery code, so just follow the above code. only changes are made in CSS using Jquery addClass and removeClass Methods.

See the Pen sticky navigation bar 2 by rajeshdn (@cool_lazyboy) on CodePen.0

ZoomIn – ZoomOut Sticky Navigation bar with Logo

Just go through the above steps and In ZoomIn – ZoomOut Sticky Navigation bar with logo, Initially the Height, fontsize, line-height of Navigation bar will be height:90px;, line-height: 90px;, font-size: 20px; and with specified width and height for the logo. and whenever the scroll bar gets triggered, the function inside it gets executed.

Now by using the if else condition statement, we can achieve the ZoomIn – ZoomOut Sticky Navigation effect with logo. if the scrolltopvalue is greater than or equal to the value of offsettopvalue. then it adds the fixed class to the nav element. class:fixed has the position:fixed;, top:0; and height:60px;. so that the navigation bar height decreases from 90px to 60px and also the logo widht and height decreases from (width:125px to 110px, height:75px to 49px) and gets sticky at the top of the browser.

For the proper ZoomIn – ZoomOut effect of the logo, we should set the line-height:60px; and font-size:16px;.

 .fixed {
  position: fixed;
  top: 0;
  height: 60px;
}
.fixed li {
  line-height: 60px;
}
.fixed li a {
  font-size: 16px;
}
.fixed li img {
  width: 110px;
  height: 49px;
  margin-top: 5px;
}

Now by using the else part, whenever the scrolltopvalue is less than the value of offsettopvalue. then it removes the fixed class from the nav element. and the navigation bar moves back to the initial position.
There is no change in the Jquery code, so just follow the above code. only changes are made in CSS using Jquery addClass and removeClass Methods.

See the Pen sticky navigation bar 3 by rajeshdn (@cool_lazyboy) on CodePen.0

Note: Whenever the scroll bar effect occurs, we can observe the sudden jump in the main content below the navigation bar. To overcome this flaw, we can wrap the navigation bar into the div element and by setting its height equal to the navigation bars height.

Final notes…

In this article, I used Jquery to create the Sticky Navigation bar.and In my upcoming article, I would create the Sticky Navigation bar using Javascript because now there are many Javascript Frameworks and Libraries available in the market, so it would be better to create the Sticky Navigation bar using Javascript.