How to change your navigation style on scroll
ฝัง
- เผยแพร่เมื่อ 31 ก.ค. 2024
- 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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
Please don't stop this series, it is amazing and it really helps alot !
Your videos never seem to amaze me. TH-cam 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!
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!
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!!!
Fantastic video! Really clean way to manage scroll events. Definitely my go to method now. Thanks a ton for this!
You're the best instructor I have ever see, you deserve more than the best and I have learned a lot form you.
You're a lifesaver, outstanding channel, I can't stop watching and liking your videos!!
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.
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
Been battling on this for days now and just came across your channel... It's really helpful, thank you.
Lovely, thanks, finally finished my product landing page with a few JS tweaks so it looks nicer :)
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.
Also wondered how sites did that, figured it would be much more than that! Will definitely try this out.
Awesome! This is really practical and something I can use - credit to Kevin Powell.
This saved the last hair I have after trying to fix a previous "successful attempt" of background switching. Thank you.
Thanks Kevin! Been looking for this for quite sometime!
Thanks for sharing this Kevin! Much appreciated :)
Fantastic series and a great video, Kevin!
Yess ! have been waiting for this. Thank you
These videos are so helpful! Thank you for making them!
This is awesome! You’ve got everything that I looked for.
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.
Ohhhhh!!!! This trick solved so many problems for me! Thank you, Kevin!
I'm in love with Intersection Observer.. Just amazing 👍👍👌
Didnt think of this idea until you made a video about it. Thanks for thinking ahead haha
Thanks Kevin. Great tutorial!
Thanks a lot! I didnt even need to watch the intro video and I fully understood!
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.
Finally figured it out, thanks 'The King of CSS' ❤️
Ever wondered How this comes true and your video Help a lot!
Thank you so much. Great. Root margin concept was very sexy!
Thanks for this series
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
This was really helpful!
amigo eres mi héroe muchas gracias, pude cambiar totalmente el estilo del nav y hacer un super efecto, buen tuto!!
Your videos are always amazing！Thank you，sir ❤️❤️❤️
Helped me a lot, thanks man!
Great tutorial! Thanks!
This is awesome, thank you!
Thanks you help me to learn Javascripts from scratch knowledge 😀
thank you for this great tutorial!
Great Video! really really useful
Great work, Thank you.
You are a good teacher.
Thank u for this awesome video
I just did a menu shrink effect on scroll and its super buggy! This definitely fixes those issues! Thanks!
Thanks for your tutorial
Thanx! You helped me a lot!
Awesome! You could get the header's offsetHeight to set the options.
beautifully done
Great videos kevin
Just amazing! I'm going to copy those JS codes 😁
:D :D :D
Epic! I was trying to do it the old way with offsetTop. This is so much easier
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!
Perfect just was i was looking for, ill sleep and apply it to my site
That was a lot of fun
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.
Great ! Thanx Kevin ;-)
Very good!!!
You're awesome dude
Ya it cuming after three years, but you have helped me a lot, so thank you ;)
I love it!
wow, you save my life!
Thank you good sir :D
Thank you ☺️
Tnx from Russia!) Great and simple
Thanks Man 🤍
great video
smashing series. am literally deleting massive of legacy code from projects :)
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?
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.
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.
thanks, I just need that
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?
perfect!
I'm trying to find the video about how to highlight the menu element of the current section. Help please.
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 !
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!
thaankuu so much brooh
can't wait to implement this in my projects!
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
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?
Thanks
Sir, make a video on how the content fadeout when we scroll down with animations like content come from left or right. Thanks
awesome.. just subscribe!!!
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")?
Nice one. Works great, but what when there's not intro section in DOM?
Are you a mind reader or what 😅 I was stuck on this topic today and wanted to find a solution. I open TH-cam and bam ! There is your video to fix my problem 😍 This happened thrice till now 👍🏻
Haha, always nice to time things perfectly :D
Same for me!
so the advantage of intersection observer instead of event-listeners is that it is faster at loading?
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?
Good video, and good series. I use the function described but im having problems make it responsive. How can i, stop the script for responsive. i tried to condition the function to innerWidth, but i failed. I'll really appreciate any idea.
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
Hi Kevin, how do I change my default browser pls? in gulpfile browserSync. Thanks
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?
You can change the "root" in the options, so instead of looking at the viewport, it's looking at an element on yoru page.
hey ! thanks for the video! i want to know if its possible to do without sass? thanks
Why CSS Variables and not SCSS Variables? Another awesome video.
Weird, for me it adds the class but the new CSS properties don't apply to it.
Also, I when I exit the section again, the class isn't being removed. Any ideas?
Hi Kevin, thanks for the great tutorials. I have now watched both ur introducting video and this video. In the first video you show how to make it interact with sections and change background colors etc. In this it is the header. I wondered however how i can combine does two scripts into one, so I can use both features on one site.
Kind regards
Magnus
We need to have 2 observers, as we are watching for different things. At least I think so....
Can you make a video about changing the background of the navbar link depending on the section? If I’m scrolling down to the contact section, then the link that point to that section will change its background color to show the user where in the page they are.
How I will understand this JS code or strong my JS code work flow please tell me, anyone?