August 24, 2018
•Last updated November 5, 2023
Lets Build: With JavaScript - Sticky Nav
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 this 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 user 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!
Categories
Collection
Part of the Let's Build: With JavaScript collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.