jQuery Sticky Header

Hi friends, do you want to make your website’s header sticky? Let’s see how you can make a sticky header with a small piece of jQuery and CSS code.

jQuery code will use to identify at what position of height you want to stick the header, or any div element and add a special class to it. Then will use that class selector to style the CSS code to fix that element.

Let’s see an example.

HTML
CSS

You can style it as you want.

jQuery

scrollTop(): Used to return the position of the vertical scrollbar for the selected elements.

addClass(): Used to add the class to selected elements

removeClass(): Used to remove the class from selected elements

That’s it!!!

Below you can check the working example of a sticky header with jQuery in codepen.

See the Pen
jQuery Sticky Header
by Aman Mehra (@amanmehra)
on CodePen.

Being Tricky 😉

Leave a Reply

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