In this Tutorial i'll justify a way to produce mounted menu once scrolling page with CSS and jQuery, you already grasp jQuery right? a brief description regarding jQuery, jQuery could be a quick and brief JavaScript Library that simplifies hypertext markup language document traversing, event handling, animating, and mythical being interactions for speedy internet development.

The aim is to own the navigation mounted once user scrolling the page and back to its original position once scrolling back to high.

Demo
Click here to view demo of the fixed menu while scrolling down of the page.

There area unit scores of tutorial out there within the web however it contains scores of JS code thus i made a decision to make my very own means and with solely some lines of JS code, during this tutorial I solely use a pair of JS functions to create the mounted menu operating, affirmative solely 2 functions.

Ok, let’s begin.

jQuery Library
All we'd like is just jQuery library; you'll be able to transfer it in jQuery web site or use different library from Google CDN, Miscrosoft CDN and jQuery CDN.

HTML
This contains our menu hypertext markup language component, this can be simply an easy hypertext markup language UL tag to create our menus however if you have already got one then use that instead.

NOTE:
If you’re progressing to use your previous menus check that to exchange the class in JS code.

Fixed Menu While Scrolling Down

CSS
To make our menu list horizontally we want to feature CSS code.

Fixed Menu CSS While Scrolling Down

We set the z-index terribly high since we have a tendency to don’t need the other absolute part to get on high of our navigation and add with in p.c to center menu whereas scrolling.

Javascript
This tiny JS code contains the most functions of our mounted scroll menu.

Fixed Menu Javascript While Scrolling Down

So, if we have a tendency to ar on the highest but 136 height in constituent the menu is within the original position and add f-nav CSS category once larger than 136px height or add f-nav CSS category on scroll, wherever the highest page larger than 136px height.

That’s it, its simple right? Enjoy!

Services