Logan  Anderson

Logan Anderson

1625307600

Sticky Navbar on Scroll using HTML CSS and JavaScript

Hello everyone, in this video we created a sticky navbar or fixed navbar that sticks at the top of the page when we scroll the page and change its styles, it changes the background color of the navbar and the color of the texts. Everyone enjoys the parallax scrolling effect, and this is a parallax effect on the navigation bar or the navbar itself 😃 It is a very cool effect achieved using pure HTML CSS and javascript. We also made use of the CSS variables that helped us achieve this effect faster and is also a better way to create this navbar.

⌚Timestamps:

0:00 Preview
0:22 Main
16:44 Outro

🔗Important Links:

📝Sourcecode:
https://github.com/ani-24/sticky-navbar.git

▶ Want more parallax effect?
https://youtube.com/playlist?list=PL9PpUEdGHsA0TEjn4HXvoNPeO06t4QMpp

▶ Pure vanilla JavaScript projects:
https://youtube.com/playlist?list=PL9PpUEdGHsA3-MdZmi2JSa-Aki-yq0iDm

▶ Watch how to create a modern personal portfolio website landing page with lots of cool animation (active):
https://youtube.com/playlist?list=PL9PpUEdGHsA0_pFQt4U-k4cWmmRFCGblb

▶ MUST WATCH:

  1. Reveal elements on scroll:
    https://youtu.be/h7Hloe6tQkw

  2. Custom cursor:
    https://youtu.be/AW9wS3rC2_k

  3. Amazing parallax effect:
    https://youtu.be/bY146UHxbX8

  4. Typewriter effect:
    https://youtu.be/MKXzCc5Gv5w

#css #html

Sticky Navbar on Scroll using HTML CSS and JavaScript