How to make an animated sticky header with CSS and JavaScript!

Build your own website header navigation bar that sticks to the top of the page, and animates as you scroll down the page.

Summary:
Step: Use CSS to make the header sticky.
Step 2: Use JavaScript to detect if the user has scrolled down the page and add a CSS class.
Step 3: Use CSS transitions to make the header animate smoothly on scroll.

Blog post:

Source code on GitHub:

_____________________________________

FOLLOW CODER CODER:

_____________________________________

#webdevelopment #html #css #livecoding #learntocode

[ajdrag]

Thank you! You don't know how long I've been looking for this.

[trinitysenpai]

Thanks For The Tutorial🏆.Every time I just put position:fixed; then the text ended up on top of the header.
Thanks✨

[onepointperspective]

hey! may I ask how you derived the code on your script.js file above var checkHeader function, I don't quite understand it :(

[susantau]

Thank you for your super clear explanation.

[sai]

How did you use lodash directly in JS without using node or any other frameworks? can you please explain?

[naimatislamicreminder]

Great Great Video
I never see this video before.. Great explanation every step of code...
Thanks Coder :)

[thoushifaazamshaik]

Can you please do this for mobile devices? (Responsive)

[yumeileventhal]

Wow! This is incredibly helpful. Thank you!

[shubhsagar]

Very helpful thanks a lot hoping to see more on styling and animations on navbar

[dhrumilparikh]

Thank you for this tutorial. Keep going on....

[praneelkumar]

Thanks for sharing your knowledge it’s very helpful

[sharmanmaidkar]

Loved the tutorial. Very well explained 🙌🙌.

[jugibur]

Thanks, a great idea to throtteling the event!
A further speed improvement could be, to get the id of the sticky element only once at the beginning of the script... and removing Math.round();

[ayazaslam]

Make advance level html video plz .
Your 1st video helped me a lot
Thanks

[mingz]

nice, i edit a bit but it works great!

[sluciano]

Let's see how awkward you were...