When you create a website where you may need to implement the sticky or fixed header navigation menu with smooth animation on page scroll using JavaScript and CSS. So today we’ll show you how to create an animated sticky header on scroll using JavaScript.

Sticky Header Navigation With Smooth Scroll | Free jQuery, Smooth scroll header with fixed position, Smooth scrolling fixed header, Smooth scroll with navbar fixed top, Simple sticky/fixed header that animates on scroll, How to create an animated sticky header after some scrolling, sticky navigation bar on scroll, Fixed header with scrolling content example.

Way to create an animated sticky header on scroll

1. Create sample website in HTML
2. Add JavaScript code
3. Add styles
4. Output

1. Create a sample website in HTML

Let’s create a simple website in HTML to show you the sticky header functionality on page scroll. For demo purposes we have created all codes in a single file.

index.html

2. Add JavaScript code

To create a sticky header navigation bar we have to add the JavaScript code at the end of the body section.

Here first we tried to get the header element and calculate the position to stick it.

We have to create a function that executes on page scroll where we will check the position and add the sticky class in the header element when reaching its scroll position. Also we need to set the marginTop as much as the header height in the body element because we are updating the position: fixed in the sticky class.

3. Add styles

Finally, we will add the style of the sticky class and set the smooth animation for the navigation bar.

4. Output

Let’s combine all code together and see the output.

index.html

Demo & Source Code