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 😉
