React Navbar Change Background Color on Scroll - React JS Website Tutorial

Подписаться 114 тыс.

Просмотров 142 тыс.

50% 1

Learn how to change the navbar color when you scroll in React JS. The background color of your fixed navbar will change when your scroll exceeds the height of the navbar. A simple effect you can add to any React JS website.
I am using React hooks and useState to create this effect. Also, I'm assuming you already have a navbar created. If you want to learn how I made my navbar in the video, then watch the video I linked below
Learn how to make the React Website in this video
• React Website Tutorial...
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Are they any other cool website animations or effects you've seen? Comment below!

Опубликовано:

12 авг 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 203

@oscardosjb 3 года назад

I'm currently in the progress of learning React JS/Native. Thank you so much!

@khomohzie 3 года назад

Thank you so much for this. You have no idea the number of websites and tutorials I read for this. This is exactly what I want 👏

@payalverma4653 2 года назад

Same here, thank you so much

@uzairabdullah208 3 года назад

And here was me fretting over it!!! thanks a million man!

@aleemjaved4420 2 года назад

I'm currently in the progress of learning React JS Thank you so much!

@jorgeb139 3 года назад

Greattttt thanks a lot, i'm learning React and i've been looking exactly for this, your form is so easy

@NargaKuruga 3 года назад

Love your channel man ! Great work, thanks for the efforts !

@nicolasyracing 3 года назад

Thank you, very good and straight-to-the-point tutorial!!

@marktwain3083 2 года назад

Awesome tutorial, thanks Brian!

@youtube-video-watching-now 5 месяцев назад

Thank you for your clean step by step explanation. I am applying it to my intern project.

@charlesbaker2851 10 месяцев назад

Still super valid and super simple! Thank you!!!

@akbarmaulana517 3 года назад

Thank you so much for creating this. It helps me a lot cause I want to know hot to change navbar's background color when I scroll the web.

@Deddy676 3 года назад

Dude that so fancy, thanks !!

@joakov3 3 года назад

I've been looking for this thank you man

@briandesign 3 года назад

anytime!

@atirpok3 2 года назад

Thanks man. Super helpful!

@kamiladewale5426 3 года назад

You always nail it man. Kudos

@briandesign 3 года назад

Thanks!

@keshavsethi1610 3 года назад

really cool man thanks a lot one. Really well done.

@ibadshaikh2215 3 года назад

Amazing as always buddy!

@briandesign 3 года назад

Thank you! Cheers!

@a.j9157 2 года назад

Thanks man!

@praveen_javali 3 года назад

Thank you very much, I was looking for this.

@briandesign 3 года назад

No prob!

@itspawanpoudel Год назад

Thanks dude :)

@saurabhjoshi5021 3 года назад

this is what i am looking for thankyou very much

@radomirmijovic2605 3 года назад

Great video, thanks man

@user-qz5tt6vy4p 2 года назад

thank you very much!! It helped me a lot

@unmoybiswas5190 3 года назад

thanks a lot for such a beautiful tutorial

@Phyx1u5 3 года назад

awesome man this helped me heaps thanks

@adeolaa.366 3 года назад

subscribed!!! thank you Brian I was looking so hard for exactly this

@briandesign 3 года назад

Glad I could help!

@adeolaa.366 3 года назад

@@briandesign is there any source code though im following the video but it would be nice to see sc?

@BleedingDryTheHeart 3 года назад

That was helpful my friend , thank you :)

@briandesign 3 года назад

Glad it helped!

@dalimkumardas3760 2 года назад

Thank you very much budddy

@jamesgabbitus 2 года назад

thanks brah, very helpful

@bhagyeshpatel6472 2 года назад

Thank you so much for helpful content

@bonnie6614 3 года назад

Great tutorial! Subscribed!

@briandesign 3 года назад

Thanks!

@chalermkhwannasritha7431 3 года назад

Thank you so much! Subscribed!

@briandesign 3 года назад

Thanks Bonnie!

@daudahmed2343 2 года назад

Thanks for this

@FaeUtero 3 года назад

Amazing! Thank you \m/

@gijoe3211 3 года назад

Awesome. Works with react-bootstrap too. Many thanks

@arnobchakma3080 2 года назад

Thank you so much you are amazing...

@bintangyogapamungkas1225 3 года назад

Thanks for sharing 🙌

@SachinKulshreshtha6185 2 года назад

Thank you very much for this video.

@svsamvalvi 3 года назад

Good video! Thanks!

@gabrielfono844 2 года назад

I am using this logic to solve other problem on my web application

@julieno.2053 3 года назад

Thank you very much !

@calmyourmind5617 Год назад

Thank you very much

@rasulakhundov500 2 года назад

thank you so much

@shivanshpratap3624 3 года назад

Thank You, It was Helpful.

@briandesign 3 года назад

Glad it helped!

@chideraike 3 года назад

Bro Thanks so much for this video!!

@briandesign 3 года назад

Thanks!

@gabrielfono844 2 года назад

thank you very much

@everson_vinicius Год назад

excelent!

@EloxFire 3 года назад

Thanks, helpful and very clear explanations.

@briandesign 3 года назад

Thanks Enzo

@stephensander3061 3 года назад

Thanks so much!!!

@alidev6882 3 года назад

Hey you solved my problem thank u so much, and subscribed.

@briandesign 3 года назад

Thanks Ali!

@NayemIslam-ji3dq 2 месяца назад

Thanks a lot dear

@dheerajnaik6467 3 года назад

I am ur big fan. Following all your videos

@briandesign 3 года назад

Appreciate it Dheeraj!

@CreativeWorkersBest 3 года назад

I liked your tutorials. I am sharing your videos my friends. We wait a lot of react js tutorials.

@briandesign 3 года назад

Thanks! I have another react website tutorial I'm editing right now, so it'll be up in a few days

@CreativeWorkersBest 3 года назад

@@briandesign Now I am learning react js. If I have questions realted to react js, could I ask?

@briandesign 3 года назад

sure

@capitanm2166 3 года назад

Anyway to add a smooth transition like in css transition: .1s;?

@naumanshigri 2 года назад

thank. you so much

@Seven77tw 3 года назад

you're the best

@valzu3921 Год назад

I love you

@kokuxz3837 3 года назад

I tried your solution and I found out that if I resize the screen that this is not going to work because the scrollY location on the screen changed so that if statement not working properly.

@musadanjuma6603 3 года назад

I'M GLAD I SAW THIS. THANK YOU SO MUCH!!!

@briandesign 3 года назад

anytime!

@hieuminh9402 3 года назад

this is what I'm looking for

@h.m.zakariasumon1644 2 года назад

Thank you boss

@nileshmalavi909 3 года назад

Thank You so much

@kurenpokaramu5230 2 года назад

Why did you use event listener outside the useEffect? I think it's an anti-pattern for react though.

@Screamer-jy5db 2 года назад

good job

@mentalizing 7 месяцев назад

thanks from brazil

@Paul-wz1xw 3 года назад

Really helpful content man! Have you tried this with throttling so that the scroll event isn't firing every time someone is scrolling on the page?

@briandesign 3 года назад

I haven't! I'll have to look into that

@kfarooqabdulla8967 2 месяца назад

very good

@MrDillonowns 3 года назад

This code is wrong. You are putting an event listener outside of a use effect hook that removes the event when the component unmounts. This means every time your page rerenders you are adding another event listener to your window. This means you are slowing down your code since the event callback is firing off many times!

@gabrielprrd 3 года назад

Yeah, it would be better to add the event listener inside the useEffect and then also add a clean-up function that removes it.

@bryanromero4135 2 года назад

how the useEffect hook could be used so that it doesn't cause said problem friend?

@bryanromero4135 2 года назад

@@gabrielprrd what would be the solution in the code? some example?

@bryanromero4135 2 года назад

asi seria la solucion a ese problema useEffect(() => { const fixedNavbar = () => { //console.log(window.scrollY); if (window.scrollY >= 739) { setNavbar(true); } else if (window.scrollY { window.removeEventListener("scroll", fixedNavbar); } }, []);

@mikeatilano4954 3 года назад

how'd you get the navbar on top of the image/video of the hero section?

@yacouvbanou6886 3 года назад

oh men you are good, thanks

@briandesign 3 года назад

Thanks Yacouv!

@namozostonayev9187 3 года назад

Great. thank you so much

@briandesign 3 года назад

Thanks Namoz!

@easytutorialdarija 3 года назад

thanks bro , you are best

@briandesign 3 года назад

Thanks Rofix!

@AangPer 3 года назад

But how can I make the navbar change color in each section?, for example in the Hero it is transparent in the first section blue and in the second red and so on, I made that effect by creating a reference for each of the sections that I wanted and using getBoundingClientRect I made an if and else statement that when the top is less than and equal to 0 and the bottom is greater than and equal to 0 it changes of the color that I want but i think ist not a good aproach or are to many line for something that maybe should more easy

@gabrielfono844 2 года назад

where did you get that amazing background is it svg please share resource if you can thanks

@daveglad3554 3 года назад

Amazing 👌🏽❤️

@briandesign 3 года назад

Thank you 🙌

@ThienNguyen-ui8jl 2 года назад

Bro, is there any problem if this approach cause re-renders on every scrollY ? I'm a newbie so I don't which re-render cases are accepted. Thank you bro!

@ariefsetiawan8445 3 года назад

Awesome

@amanchaudhary8494 3 года назад

thanks

@ferdianfh 2 года назад

hey brian thank you for this great tutorial! do you still answer? i have a question, what if i want to change the color twice in different scrollY height?

@anantgupta1216 3 года назад

bro u r a real GOD KEEP MAKING VIDEOS BROOO!!!

@briandesign 3 года назад

Thank you, I will

@SzTz100 2 года назад

Great video, which VSCode theme are you using ?

@ani9415 Год назад

how will we apply this condition under styled components?

@ricardosolis9800 2 года назад

thanks you can also put the addEventListener in a useEffect

@osman1110 Год назад

When you position your scroll bar at exactly the 80px y, the animation keeps triggering. is there a way to stop this?

@stivenrodriguez8628 3 года назад

great content. +1 sub

@asmereg 3 года назад

Thanks

@AryanKumar-cc7ku 2 года назад

Full video of this project from starting?? Can anyone share the link

@christinaharris9528 3 года назад

Thanks, I was trying to figure this out. I'm using styled-components as well as react-strap and it took me a bit to figure out how to do this without classes. Just in case anybody wants to know I didn't put an active class in my styled component. I did use the navbar useState code, the changeBackground function, and the addEventListener. In my component under the navigation tag I used jsx style to insert the ternary it looked something like this : I'm sure there's also a way of doing this through styled-components with props but I'm still learning. If somebody figures it out let me know!

@favourp 2 года назад

For styled components, this is how you add the active class const Nav = styled.nav` height: 60px; display: flex; justify-content: space-between; padding: 1rem 2rem; z-index: 100; position: fixed; width: 100%; background: transparent; &.active { background: #cd853f; } `; This is how you implement it

@ekweisking2023 2 года назад

Thanks a lot, styled components is nice but it kinda makes everything feel different.

@ekweisking2023 2 года назад

@@favourp i think i like yours better

@pedrovictorsaraiva8705 Год назад

@@ekweisking2023 Did it work?

@exeibier811 3 года назад

Hi! excellent video but im running into a problem, i get the error window is not defined. if anyone can help me would be great. thanks!

@gabrielfillon11 2 года назад

How do I use this on styled components? I want to be able to pass to my styled components but don't know the proper syntax

@mathiasriissorensen6994 3 года назад

For those of you who leverage NextJS, you have to use useEffect around the window.addEventListener : React.useEffect(() => { window.addEventListener("scroll", changeNavbar); }, []);

@LevTheDev 2 года назад

God sent 🙏

@vivekbhatt3932 2 года назад

thanks

@karthikpuvvula Год назад

thank you

@solomonlekan4113 Год назад

You fixed my problem. Thanks

@metalyx1 Год назад

please, don't forget about a cleanup functions in such cases. Or you will have face a memory leak. Add this code right before the end of this useEffect: return () => { window.removeEventListener("scroll", changeNavbar); }

@DavidOSinger 3 года назад

any idea why instead of transparent my navbar keeps showing white ?

@MisouSup 3 года назад

Thank you. Very simple stuff, but we wonder if we are doing it right XD

@briandesign 3 года назад

Thanks, and yeah I got this straight from the docs

@MisouSup 3 года назад

@@briandesign oops. I meant that we always wonder how these components are made, but it turns out it's this simple

@aryajawarkar3861 Год назад

How did you add the rotating planet in background can please share the link or help me I want to do it too

@briandesign Год назад

it's just a video

@krcpr007 Год назад

how i can do this in nextJS also this method is not working in nextJs.

@jhonrvlogger 3 года назад

Thank you so much!!!! hey i have a question do you know how can i do a dropdown in the menu using NavLink ?????

@briandesign 3 года назад

I made a dropdown navbar vid, so you can check that out and then refactor it using a NavLink

@shrikantjha5630 3 года назад

Looking for something like this.

@JeanSantos97 3 года назад

How to change the style (background-color) of a navbar, depending on the page I am on in React?, for example: I'm on the index page, the navbar at the beginning has a black color, when scrolling it changes to red, Then I go to the services page, the navbar at the beginning has a blue color, when scrolling it changes to yellow, and if I go back to the index I have the colors already defined for the index. Thanks

@JeanSantos97 3 года назад

Please, help me!

@hackzyoboy2459 3 года назад

Man, how would you use Intersection Observer in this???

@Achiesamablog 2 года назад

idk, I remember some guy telling me I always have to clean the event (or something) whenever i use event listener in react. Any one got some clue to it?