How to change your navigation style on scroll

Рет қаралды 212,047

Күн бұрын

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.
GitHub repo: github.com/kevin-powell/navba...
(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
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 199

@user-nc7tk3ee3q 5 жыл бұрын

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

@pieter-venter 5 жыл бұрын

Your videos never seem to amaze me. KZfaq 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!

@cintron3d 5 жыл бұрын

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!

@muhammadraza2940 2 жыл бұрын

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

@nuqtamedia1294 2 жыл бұрын

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 4 жыл бұрын

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

@cervece41 4 жыл бұрын

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

@MARVTOBI-wz8qk 10 ай бұрын

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

@ramadanmoheyeldeen6252 4 жыл бұрын

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

@SuperSaiyanScandinavian 4 жыл бұрын

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.

@KevinPowell 4 жыл бұрын

I do my best to read them all :) Glad that you enjoy my content, and thanks for taking the time to let me know :D

@adrian20065 5 жыл бұрын

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

@rebelmachine88 5 жыл бұрын

Fantastic series and a great video, Kevin!

@zakariaelkhachia1533 4 жыл бұрын

Thanks Kevin! Been looking for this for quite sometime!

@gabeadams2926 5 жыл бұрын

Thanks for sharing this Kevin! Much appreciated :)

@Fliteska 5 жыл бұрын

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

@pallavisingh62 2 жыл бұрын

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

@tasteoftheair 3 жыл бұрын

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.

@KarolD666 3 жыл бұрын

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

@aqua123670 5 жыл бұрын

Yess ! have been waiting for this. Thank you

@ARTICFR0ST 5 жыл бұрын

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

@_vikramhegde_ 5 жыл бұрын

I'm in love with Intersection Observer.. Just amazing 👍👍👌

@deniskotov 3 жыл бұрын

Ohhhhh!!!! This trick solved so many problems for me! Thank you, Kevin!

@ikhyeonkim4372 5 жыл бұрын

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

@jamesa. 4 жыл бұрын

Thanks a lot! I didnt even need to watch the intro video and I fully understood!

@suhrobmuboraksho 2 жыл бұрын

Thanks Kevin. Great tutorial!

@pauljohn3898 3 жыл бұрын

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

@devine_noise 2 жыл бұрын

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.

@tarekjamanlabu9773 2 жыл бұрын

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

@danielChibuogwu Жыл бұрын

Thanks for this series

@giovannipizzato6888 3 жыл бұрын

Helped me a lot, thanks man!

@utkarshkukreti239 3 жыл бұрын

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

@MegaPupizoid Жыл бұрын

Thanks you help me to learn Javascripts from scratch knowledge 😀

@jvoyager1 4 жыл бұрын

This is awesome, thank you!

@DamianDemasi 2 жыл бұрын

Great tutorial! Thanks!

@greysaga 2 жыл бұрын

thank you for this great tutorial!

@andersonalmeydat7715 2 жыл бұрын

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

@NERO-ez1mn 3 жыл бұрын

seriously the 1st vid of theory is difficult for me to understand maybe because i'm a newbie but after this part i see it clearly that we are talking about the observe() native function all along hahahahahaha THANK YOU REALLY SO MUCH you deserve more subs.

@BarthObiefuna 3 жыл бұрын

You are a good teacher.

@k.jflacko5720 2 жыл бұрын

This was really helpful!

@mrmamun5830 5 жыл бұрын

Just amazing! I'm going to copy those JS codes 😁

@milosleng1175 3 жыл бұрын

:D :D :D

@joshuatao7020 5 жыл бұрын

Your videos are always amazing！Thank you，sir ❤️❤️❤️

@SaleKnezevic 5 жыл бұрын

Great work, Thank you.

@AbhishekKumar-mq1tt 5 жыл бұрын

Thank u for this awesome video

@AllenMarsam 2 жыл бұрын

Thanks for your tutorial

@christianaltan4913 3 жыл бұрын

Great Video! really really useful

@kostyantinbilyznyi3496 4 жыл бұрын

Thanx! You helped me a lot!

@philkewley 2 жыл бұрын

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

@misterkilluminati6949 2 жыл бұрын

beautifully done

@zachfenton608 3 жыл бұрын

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

@DamienPeden 5 жыл бұрын

I just did a menu shrink effect on scroll and its super buggy! This definitely fixes those issues! Thanks!

@underdog3864 4 жыл бұрын

Epic! I was trying to do it the old way with offsetTop. This is so much easier

@robertwattner 3 жыл бұрын

Now we need to offset anchor links to accommodate the sticky header height. Not the margin-top: -100px: padding-top: 100px; to every anchor Awesome video btw! Your videos are the best!

@Darival92 5 жыл бұрын

Great videos kevin

@Billiam112 4 жыл бұрын

That's cool, thanks for sharing! Apparently, it is not supported by ie11, so my question to you is: would you go for listening to scroll event if you had to support ie11 or would you do it in some other way?

@gabiold 4 жыл бұрын

Awesome! You could get the header's offsetHeight to set the options.

@royhyde8842 2 жыл бұрын

That was a lot of fun

@upsylondeveloppement8837 5 жыл бұрын

Great ! Thanx Kevin ;-)

@rahibharoon7852 2 жыл бұрын

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?

@saydurrahman1899 5 жыл бұрын

Can you please make a video on responsive Mega menu with really nice animation. This series has been absulutly amazing. I am Learning so much. Thank you for your hard work.

@sofienebb 2 жыл бұрын

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

@jamjam3448 Жыл бұрын

Thank you ☺️

@alinawaz4034 5 жыл бұрын

Very good!!!

@noahsscott 5 жыл бұрын

Just found your channel. Thank you for these! Would be interested to see intersection observer used for a table of contents say for a wiki or one-pager. I'm trying to assemble one myself with IO but struggling.

@vijaydhravida 5 жыл бұрын

Any luck on this front @noahScott ? I am trying the same, so if you have any insights I would very much be interested to know.

@majgajsek7818 2 жыл бұрын

Thank you good sir :D

@Juan-lj4pi 4 жыл бұрын

You're awesome dude

@RyanEwanchuk 2 жыл бұрын

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?

@tux8345 2 жыл бұрын

wow, you save my life!

@pasizdobrekuce 4 жыл бұрын

Nice one. Works great, but what when there's not intro section in DOM?

@truedivan 4 жыл бұрын

Tnx from Russia!) Great and simple

@iliankarasimirov9685 5 жыл бұрын

thanks, I just need that

@akanshamotwani3646 4 жыл бұрын

Hi Kevin, how would the intersection observer work with position sticky of CSS. Instead of the elements in the viewport, I need to observe the element which currently is stick on the top. Amazing series though!

@kensleylewis 2 жыл бұрын

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)?

@sithumdasantha3147 3 жыл бұрын

Thanks Man 🤍

@franco-cespi 3 жыл бұрын

I love it!

@ShawnRitch 4 жыл бұрын

Instead of using pixels, can ems be used? Thanks for all your tutorials :)

@GiancarloCarccamo 2 жыл бұрын

great video

@mrrolandlawrence 3 жыл бұрын

smashing series. am literally deleting massive of legacy code from projects :)

@decartier23designs68 5 жыл бұрын

Hi there, I really like your work and i was wondering if you can tell me how can i do that 3D modern look product gallery or slider for websites , the one that the photo has no background ? is it like just a png photo or do you have to add some more edit to make it look like that . Thankyou !

@valentinfigueiredo 3 жыл бұрын

hey ! thanks for the video! i want to know if its possible to do without sass? thanks

@timhart6061 3 жыл бұрын

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

@dimensionalpotential 4 жыл бұрын

But Kevin et al, if I need to differentiate between scrolling down and scrolling up - is there an alternative to a JS scroll watcher in that case?

@Franiveliuselmago 4 жыл бұрын

I'm trying to find the video about how to highlight the menu element of the current section. Help please.

@arksan8221 5 жыл бұрын

I was really looking forward to enrolling in your Sass course sometime this June... just didn’t get a chance to. And now it seems that enrollment is closed.😭 is there any chance it will be available again? I had it all planned out... I was going to take your course next before I take JavaScript courses 😞

@abdulrehaman2406 5 жыл бұрын

Are you a mind reader or what 😅 I was stuck on this topic today and wanted to find a solution. I open KZfaq and bam ! There is your video to fix my problem 😍 This happened thrice till now 👍🏻

@KevinPowell 5 жыл бұрын

Haha, always nice to time things perfectly :D

@eduardopassero47 5 жыл бұрын

Same for me!

@iUmerFarooq 5 жыл бұрын

Sir, make a video on how the content fadeout when we scroll down with animations like content come from left or right. Thanks

@HeyTylerMartin 2 жыл бұрын

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 😅

@MrHerbalite 5 жыл бұрын

Great demo. Thank you. How do I accomplish the same if the intersection is actually a sibling element in a wrapper class that has max-height set and overflow is set to auto? I do use CSS grid. The wrapper class has a scrolling area. The first entry within is sticky and everything is fine unless I want to jump to the next entry through an external link. As you probably know, the sibling entries are getting pushed under the sticky part. So far the advice that I got is: Can't be done (aside from working with the scroll event), but I'm not quite ready to accept that. If the intersectionObserver can watch out for two siblings to overlap each other my problem can be solved. Any idea, or even a tutorial?

@KevinPowell 5 жыл бұрын

You can change the "root" in the options, so instead of looking at the viewport, it's looking at an element on yoru page.

@DanSinor 3 жыл бұрын

What would the "const sectionOne = document.querySelector(".home-intro");" be if I wanted to target and trigger off of section ID (services) rather than CLASS (bg-dark)? As in example (). Would it use ("#services")?

@whatthefunction9140 2 жыл бұрын

Nice sass

@DavidNitzscheBell 5 жыл бұрын

These Intersection Observers are really handy. Have they been around forever and no one knew, or are they something new or newly supported?

@KevinPowell 5 жыл бұрын

They've been around for a little bit (not that long), but browser support has only recently really come around (Safari just started supporting it in their latest release). IE doesn't obviously, but there is a polyfill, which I'll do a short video on to wrap up the series.

@mahvaree 2 жыл бұрын

Thanks

@abdillahsyafiq 3 жыл бұрын

can't wait to implement this in my projects!

@NoTengoIdeaGuey 2 жыл бұрын

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

@xades971 3 жыл бұрын

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