How to change your navigation style on scroll

This video explores using the Intersection Observer API to watch for an element leaving the page and then changing the style of a fixed navigation bar.

(includes start and finished versions)

I set up some custom properties ahead of time to make the change really super simple, and then with the use of a little JavaScript to set up our observer, we can add (or remove) a class from our navigation when it reaches the right point on the screen.

#JavaScript #IntersectionObserver #CSS

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[nctkeeq]

Please don't stop this series, it is amazing and it really helps alot !

[pieter-venter]

Your videos never seem to amaze me. YouTube is full of videos on the basics of CSS but your videos focus on the more advanced things that people might not even have heard of.

Thank you for that!

[cintrond]

Thank you so much! I thought I knew CSS and JS but then I started seeing these sites with fancy transitions and didn't know how they were achieving that look. This video is so helpful thank you!

[muhammadraza]

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

[nuqtamedia]

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!!!

[blonduose]

Lovely, thanks, finally finished my product landing page with a few JS tweaks so it looks nicer :)

[ramadanmoheyeldeen]

You're the best instructor I have ever see, you deserve more than the best and I have learned a lot form you.

[cervece]

You're a lifesaver, outstanding channel, I can't stop watching and liking your videos!!

[MARVTOBI-wzqk]

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

[Fliteska]

Also wondered how sites did that, figured it would be much more than that! Will definitely try this out.

[SuperSaiyanScandinavian]

I dunno if you read the comments much, or if there are just too many comments to sift through, but i just wanna say your channel is absolutely fantastic. It's specifically your channel and DevEd that I come to all the time to learn new css tricks. im still relatively new to web development and am finishing up my first fullstack site. but the thing that has lacked in all my education is styling. you guys have helped me to make my site and other demo stuff I've done recently look so much better than my earlier stuff. honestly if I land a job because of my portfolio, you guys are to thank. As a matter of fact, once I get my portfolio site going, i'm going to credit you guys in my about me section.

[gabeadams]

Thanks for sharing this Kevin! Much appreciated :)

[adrian]

Awesome! This is really practical and something I can use - credit to Kevin Powell.

[ikhyeonkim]

This is awesome! You’ve got everything that I looked for.

[ARTICFRST]

Didnt think of this idea until you made a video about it. Thanks for thinking ahead haha

[tasteoftheair]

Thank you for a great video! As a beginner, I was struggling to change text color of anchor links. Had to look at Kevin's code on github for the solution. It turned our than css 'color: inherit;' on each anchor link (there is a class for each like) solves it.

[zakariaelkhachia]

Thanks Kevin! Been looking for this for quite sometime!

[KarolD]

This saved the last hair I have after trying to fix a previous "successful attempt" of background switching. Thank you.

[rebelmachine]

Fantastic series and a great video, Kevin!

[pallavisingh]

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