How to change your navigation style on scroll

perfect!

Been battling on this for days now and just came across your channel... It's really helpful, thank you.

thanks

Thanks you help me to learn Javascripts from scratch knowledge 😀

Thank you ☺️

how to make this effect only in home page .. and when click on shop get me navbar static color ... ( i work on project the header in page different from home page .. i just connect them with php .. so if i change the main style to header it will change every thing in all pages like shop and about us ) so is there any fix for this problem ??

I use three lines of js add and remove class no need for intersection observer.

Thanks for this series

I just spent 3 hours trying to wrap my head around this with no results. Then I found your video and it all makes sense now! Thanks a ton!!!

That was a lot of fun

Had some problems with Gulp CLI on my Windows machine. If you're running into an issue with 'gulp watch' not working, you can make the scss file a css file, delete the package.json, node_modules, package-lock.json, and just remove all "&" (&:after becomes .nav__link::after) in the css and replace it with the parent css class and use Live Server extension to get auto page reload in the browser. Clean up your curly brackets in the CSS and everything works. Thanks for making this Kevin, love your teaching style.

wow, you save my life!

Take a drink every time he says "I've a got another video for that subject already" and you'll be as drunk as i afgbnq

Has anyone told you that you speak very fast? :D

great video

haha nice

Every time I start a new project I find myself having to go back through your library of videos, gradually what I am learning is starting to stick, although I still struggle to remember even the most simple instructions! - one thing from this video, is how are you changing the background image in the big hero section, I swear every time I look at the video it's a different Unsplash image but I can't find how you're doing it within the CSS. Thanks as always for sharing

thank you for this great tutorial!

Thanks

Are you only using CSS variables for demonstration purposes, or is there another reason you're choosing CSS variables over SASS variables when you're already using SASS? Still learning, just trying to wrap my head around it all 😅

Thanks Kevin. Great tutorial!

Thank you good sir :D

Fantastic video! Really clean way to manage scroll events. Definitely my go to method now. Thanks a ton for this!

Ya it cuming after three years, but you have helped me a lot, so thank you ;)

beautifully done

These videos are so helpful! Thank you for making them!

amigo eres mi héroe muchas gracias, pude cambiar totalmente el estilo del nav y hacer un super efecto, buen tuto!!

Finally figured it out, thanks 'The King of CSS' ❤️

This was really helpful!

Nice sass

In connection to this great exercise, is it possible to a parallax effect with this technique (i.e. as you scroll down the page the background image scrolls slower)?

Got a question for you. This works great, but it only works for one section. Let's say I have a bunch of sections with a class called "black-section" and I wanted the navigation to change every time it intersected with one of those sections, what code would I have to change?

Great tutorial! Thanks!

Thanks for your tutorial

Kevin Powell you great really like you videos it's very informative and technical and easy to understand for us. can we use intersection observer API in Reactjs?

Kevin Powell you great really like you videos it's very informative and technical and easy to understand for us. can we use intersection observer API in Reactjs?

Thank you so much. Great. Root margin concept was very sexy!

Ever wondered How this comes true and your video Help a lot!

do you have any video on how to hide horizontal scrollbars that appear when vertical scrollbar appear. i don't know what i'm doing wrong

Perfect just was i was looking for, ill sleep and apply it to my site

Thanks Man 🤍

Can this be done in CSS-only? Perhaps simpler, but scriptless nevertheless. Thanks.

Probably a silly question but how is that border on the nav elements made? Where it starts from the middle and stretches out to the end points. I'm looking through the repo but I can't seem to get my head around it

its not working in pages other than the homepage. Can anyone help ?
I mean its working in one of the many html pages of my website. How can I make it work in all the pages ? anybody?

I would have used classList toggle, and passed in entry isintersecting bool to to keep code clean and tidy

can't wait to implement this in my projects!

Imagine if this became a CSS feature.
@intersection observer (*element to look for if is on screen*) {
CSS code
}

Hi! I was wondering where do u put transition on when u scroll back up? I put transition on the .nav-scrolled only so when i scroll down the transition works but when i scroll back up it just removes instant