React Tutorial - How to Change Navbar Color When Scrolling in React

No video

React Tutorial - How to Change Navbar Color When Scrolling in React

Рет қаралды 36,884

Күн бұрын

Hi guys! In this video I will show you how to change the color of your navbar while scrolling down the page in React. We start off with a transparent background and then when scrolling down the page it changes to a black background. I built this off of a previous React Tutorial.
If you would like to learn how to build this complete project from the beginning then you may find that video here:
• React Website Beginner...
If you just want to clone my repository and follow along in the video then you may find this project here in my github:
github.com/fir...
Thank you for the support and following along with me in my coding journey. If you have any questions or comments then please let me know!
Connect with me on IG:
fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

Пікірлер: 69

@suhaylmuminov3825 Жыл бұрын

Great tutorial. I would like more short and specific tutorials like this

@codecommerce Жыл бұрын

Drop me a comment if you think of anything specific

@suhaylmuminov3825 Жыл бұрын

@@codecommerce Could you make a tutorial on mix-blend-mode? I think it's a cool and underrated feature

@harsh8462 2 жыл бұрын

this is all we want from a tutorial , a simple and working solution thnx bro!!

@codecommerce 2 жыл бұрын

Thanks dude!

@anidkhan6796 2 жыл бұрын

I used to do it by JavaScript before thanks for the tutorial it got so easy now.

@codecommerce 2 жыл бұрын

That's awesome! React makes it so easy on us. :)

@ABC-el3ql 2 жыл бұрын

Thank you very much. I like the 'boiler-plate' lecture like this video. And I'm glad your subscribers have increased. Congratulations.

@codecommerce 2 жыл бұрын

Thanks so much man!

@dima6488 2 жыл бұрын

This will result in bad performance as well as adding event listeners in react is generally discouraged, instead: use a useEffect like so: useEffect(() => { const COLOR_CHANGE_THRESHOLD = 90; if(window.scrollY >= COLOR_CHANGE_THRESHOLD && color !== true){ setColor(true) } if(window.scrollY < COLOR_CHANGE_THRESHOLD && color !== false){ setColor(false) } }, [window.scrollY]) The second color condition will improve performance because you will not set color to the same value multiple times (i.e while keeping to scroll down)

@codecommerce 2 жыл бұрын

Thank you Dima - I appreciate the feedback. Since that video I have learned that using event listeners in react is less than ideal. I’m still learning. 😀 I like how you wrapped it all in a use effect and passed in window.scrollY in the dependency array. I will try this instead.

@shivankbatra5643 Жыл бұрын

can you go in a bit detail as to why this will lead to bad performance?

@ivan4486 7 ай бұрын

It doesn't work. ESlint message: "Outer scope values like 'window.scrollY' aren't valid dependencies because mutating them doesn't re-render the component."

@Lazy1097 Жыл бұрын

man, thx for your work, you are amazing, i'm glad i found your channel!)

@codecommerce Жыл бұрын

Thanks dude!

@shreyasshinde3990 3 ай бұрын

Very well explained! Thanks for your excellent content..

@user-zy6yt5kg4g 7 ай бұрын

love it man so easy to understand

@vishvsalvi9887 4 ай бұрын

Thanks man, quite helpful.

@adolfobcruz Жыл бұрын

simple and direct.. thank you!

@sinankodur4251 4 ай бұрын

how to make it a smooth color change, it is just jumping into color that transition is needed

@akachukwuudechukwu7761 Жыл бұрын

Thanks for the concept

@CamIvanGoz 9 ай бұрын

Thx a lot dude! You're amazing

@gabrielobafisile2299 Жыл бұрын

Thanks for this. Great solution.

@ihorv44 Жыл бұрын

a lot of thanks for the video. it's help me greatly

@codecommerce Жыл бұрын

Thank you!

@BraveHearts237 2 жыл бұрын

Thanks, very helpful

@codecommerce 2 жыл бұрын

You're welcome!

@santiagotorres8680 2 жыл бұрын

Thank you for sharing your knowledge :)

@codecommerce 2 жыл бұрын

Thank you Santiago!

@mdfayzullahaman7241 6 ай бұрын

Thank you so much

@life4s936 4 ай бұрын

Thank you sir

@nv1242 2 жыл бұрын

Very helpful. Thank you.

@codecommerce 2 жыл бұрын

Thank you naresh

@AndresRojas-tr9ir 2 жыл бұрын

Thank you so much, good tutorial

@codecommerce 2 жыл бұрын

You are welcome!

@GitProTech 6 ай бұрын

hye ! how to make navbar item automatically active when relevant details come infront? please guide me I need it in my project at run time

@shahadtuglak1906 2 жыл бұрын

Amazing stuff

@codecommerce 2 жыл бұрын

Thank you sir!

@kaushikdiganto5690 2 жыл бұрын

it was helpful.

@codecommerce 2 жыл бұрын

Thank you Kaushik!

@aymenbachiri-yh2hd 9 ай бұрын

thank you

@elmokhtar8576 Жыл бұрын

Hi, thank you for making this video. I have a question please : Can we put 'addEventListener' directly or we should put it inside 'useEffect'?

@lukyno5751 Жыл бұрын

Do not added directly in it. It will create memory leak or something similar to it. Put it in useEfeect!

@elmokhtar8576 Жыл бұрын

@@lukyno5751 Thank you

@ferdianfh 2 жыл бұрын

hello, thank you this is very helpful! i have question, what if i want to change the background-color twice or more? but in different height of scrollY, such as red for scrollY >= 80, blue for scrollY => 250, and so on

@Tnvrahmed98 Жыл бұрын

just change the condition

@bengoudifaoussama7020 Жыл бұрын

the problem is when we refresh the page we see the background look transparent then look black , how to fix that?

@bhanusharma2482 2 жыл бұрын

Man you are awesome

@codecommerce 2 жыл бұрын

Haha thank you dude!

@fahadtahir91 Жыл бұрын

how to change the color of navbar link while navigating to another page ? like your home page color is dark so the color of navbar links are white.. what if the background color of ABOUT page is white i want to make the color of navbar links to black

@cristiandanielherrera4349 2 жыл бұрын

Lovely

@MehediHasan-zx3ye Жыл бұрын

thank you😊

@codecommerce Жыл бұрын

Thank you dude!

@bosahchinedu493 2 жыл бұрын

Please i will love you to make a video on navbar being hidden while scrolling down and visible while scrolling up.

@codecommerce 2 жыл бұрын

Are you saying you want it to be hidden and ONLY show while scrolling or at the top of the page?

@bosahchinedu493 2 жыл бұрын

@@codecommerce I'm saying it will be hidden only while scrolling down.

@laisadasilvapereira8185 2 жыл бұрын

Great tutorial, thanks! how did you do the highlighting on navbar items when you're scrolling the page?

@codecommerce 2 жыл бұрын

That is going to be using the "Active" property in react-scroll and setting your css. There is more information about it here: www.npmjs.com/package/react-scroll