How to Create a Sticky Nav with Vanilla JavaScript

====================

Welcome to the next installment of my Let's Build: With JavaScript series. In this video I'll be walking you through how to create a simple but dynamic sticky nav. using a combination of HTML, SCSS, and JavaScript.

The focus of these series of videos will be on using vanilla JavaScript to start. I'll strive to not reach for frameworks until absolutely necessary.

The sticky nav. will ultimately respond to a users scroll event. Each time they scroll past a certain point we can listen for when they reach an area as defined by our navigation bar. From there we can add a class to our HTML with JavaScript and then do some styling to make the experience fluid and seamless.

Check out my process and more in this video. If you have suggestions for future videos or ideas for components to build please let me know in the comments. Thanks for watching!

====================

💻 Previously published at:

💻 Check out the blog:

🔭 Check out my app:

💡 👫 Check out my agency:

🦄 Check out my personal site:

🚀 Links:

📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.

☕️ 🙏🏻 Patreon

☕️ Or buy me a coffee

[sirsurreal]

Thank You! I was having a problem finding someone to actually explain the concept and you did it perfectly. Good work :)

[alexgamero]

Great tutorial, Andy. Very well explained, clear and easy to understand. Many thanks, man! Keep it up!!

[Ccruskooooo]

Thanks for the tip dude! very clean and usefull, take that sub! <3!

[AlisherMakhmudov]

great as always, what color scheme you are using in codepen?

[denyspavlenko]

Hello! Thank you for your tutorial!
I noticed one bug, if hero image would be 100vh, then navbar 'jumps' on different dimensions.

[joedyer]

What about a nice mobile menu - maybe off canvas with some animation etc?

[theLEFTY]

It would be cool to see React stuff. You seem to give a good designer approach so you'd teach it well. That and how to go from WordPress local to live and back to local. That flow would be money.