How to change your navigation style on scroll
HTML-код
- Опубликовано: 14 июн 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 RUclips 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. RUclips 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!!!
You're the best instructor I have ever see, you deserve more than the best and I have learned a lot form you.
Fantastic video! Really clean way to manage scroll events. Definitely my go to method now. Thanks a ton for this!
You're a lifesaver, outstanding channel, I can't stop watching and liking your videos!!
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 :)
This saved the last hair I have after trying to fix a previous "successful attempt" of background switching. Thank you.
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
Awesome! This is really practical and something I can use - credit to Kevin Powell.
Thanks Kevin! Been looking for this for quite sometime!
These videos are so helpful! Thank you for making them!
Thanks for sharing this Kevin! Much appreciated :)
Fantastic series and a great video, Kevin!
Also wondered how sites did that, figured it would be much more than that! Will definitely try this out.
I'm in love with Intersection Observer.. Just amazing 👍👍👌
This is awesome! You’ve got everything that I looked for.
Thanks Kevin. Great tutorial!
Yess ! have been waiting for this. Thank you
Ohhhhh!!!! This trick solved so many problems for me! Thank you, Kevin!
Thanks a lot! I didnt even need to watch the intro video and I fully understood!
Finally figured it out, thanks 'The King of CSS' ❤️
Ever wondered How this comes true and your video Help a lot!
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.
Didnt think of this idea until you made a video about it. Thanks for thinking ahead haha
Thanks you help me to learn Javascripts from scratch knowledge 😀
Thanks for this series
Great tutorial! Thanks!
You are a good teacher.
Thank you so much. Great. Root margin concept was very sexy!
Helped me a lot, thanks man!
Your videos are always amazing！Thank you，sir ❤️❤️❤️
thank you for this great tutorial!
This was really helpful!
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.
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.
amigo eres mi héroe muchas gracias, pude cambiar totalmente el estilo del nav y hacer un super efecto, buen tuto!!
Great Video! really really useful
Thanks for your tutorial
Just amazing! I'm going to copy those JS codes 😁
:D :D :D
This is awesome, thank you!
Perfect just was i was looking for, ill sleep and apply it to my site
Thank u for this awesome video
beautifully done
Great work, Thank you.
Awesome! You could get the header's offsetHeight to set the options.
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
I just did a menu shrink effect on scroll and its super buggy! This definitely fixes those issues! Thanks!
Thanx! You helped me a lot!
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!
Epic! I was trying to do it the old way with offsetTop. This is so much easier
Great videos kevin
That was a lot of fun
Thank you ☺️
Tnx from Russia!) Great and simple
Ya it cuming after three years, but you have helped me a lot, so thank you ;)
Very good!!!
Thank you good sir :D
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.
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?
wow, you save my life!
Great ! Thanx Kevin ;-)
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?
You're awesome dude
Thanks Man 🤍
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?
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.
great video
I love it!
thanks, I just need that
smashing series. am literally deleting massive of legacy code from projects :)
Nice one. Works great, but what when there's not intro section in DOM?
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!
Thanks
hey ! thanks for the video! i want to know if its possible to do without sass? thanks
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)?
perfect!
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 !
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 😅
Nice sass
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?
Are you a mind reader or what 😅 I was stuck on this topic today and wanted to find a solution. I open RUclips 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!
thanks
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 😞
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
awesome.. just subscribe!!!
Instead of using pixels, can ems be used? Thanks for all your tutorials :)
I'm trying to find the video about how to highlight the menu element of the current section. Help please.
thaankuu so much brooh
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
Why CSS Variables and not SCSS Variables? Another awesome video.
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.
can't wait to implement this in my projects!
Sir, make a video on how the content fadeout when we scroll down with animations like content come from left or right. 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
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.
Im late for this video but also a beginner in programming, i didnt understant 1 thing, is this code vanilla javascript or is it another framework?
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