Do you want to fix your navigation (Menu Bar) at the top of your screen when scrolling page and wanted to do this thing with less and simple CSS and Javascript? Then you came to the right place.
In this Tutorial We will explain to a fixed menu on the scroll with jQuery, What we are going to do is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back to the top.
Demo
We have recently designed the website name Liimras that on we have applied Fixed Navigation.
Online there are lots of tutorials are available but lots of tutorials are contained javascript code and files so We decided to create sticky navigation our own way with only a few lines of JS & CSS code.
In this guide, We only use few lines of JS functions to make the fixed menu working.
Ok, let’s start.
jQuery Library
All we need is an only jQuery library. You can download it from the jQuery’s website can or from another library Google CDN, Microsoft CDN, and jQuery CDN.
Navigation HTML Code
This contains our menu HTML element of the Menu bar, this is just a simple HTML UL tag to make our menus but if you already have one then use that instead.
Note: If you’re going to use your old menus make sure to replace the class in JS code.
Navigation CSS Code
To make our menu list horizontally we need to add CSS code.
We set the z-index very high since we don’t want any other absolute element to be on top of our navigation and add within percent to the center menu while scrolling.
Javascript
This small JS code contains the main functions of our fixed scroll menu.
So, If we scroll our page, it will add a class .sticky on #navigation For instance when page scroll, the css #navigation.sticky will run and make it fixed. And when we scroll up it will remove the .sticky class.
That’s it guys. Hope it was helpful for you.