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!
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); } }, []);
For those of you who leverage NextJS, you have to use useEffect around the window.addEventListener : React.useEffect(() => { window.addEventListener("scroll", changeNavbar); }, []);
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); }
Let me share some code to improve memory usage: useEffect(() => { const changeHeader = () => { if (window.scrollY >= 80) { setActiveHeader(true); } else { setActiveHeader(false); } }; window.addEventListener('scroll', changeHeader); return () => { window.removeEventListener('scroll', changeHeader); }; }, []); Each time that Header mounts on the UI, a new function is associated with the Listener...
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.
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!
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
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
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!
UseEffect and Checking the mounted state, else you get an error for Window is not defined. Especially for nextjs where the server renders the page first.
When using 'Back' button, browser remembers scrolled position, but navigation has initial transparent color. When scroll - it changes color as it should. Does anyone know how to display scrolled color with 'Back' button?
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
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?
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?
Hey man, love the tips! I came here from the last vid, one thing is when I make the navbar class background: transparent; it does make it transparent but it's leaves a white box up top where the navbar used to be and once you scroll you can see the navbar information like logo and links with a transparent background. How do you get rid of that white box across the screen. I just want it to look like yours at the beginning of the video.
@@naiadbaksh3996 Man, I took a long time trying to solve this issue too. So I had the idea to access the cover style file, where the video is, and in the main container I put margin-top: -80px (since the height of the navbar is 80px, and so the video went up on the screen, to behind the navbar).
It will be necessary to make other adjustments, such as adding a background-color to the navbar when resizing it, in the media queries, and adjusting the alignment of the central text of the cover, centering it.
Hi Brian excellent tutorial. I'm having a problem with the navbar when the hamburger menu is displayed. It gets transparent and the menu gets black. How can I fix it?
you can try adding a negative margin: -80px; to bring the hero section up cause it sounds like the navbar is stacking on top of the hero section, so you could bring that section up. Or if you wanted to keep the color of the nav the same as the mobile menu, then you can create a function that changes the color of the nav to black if the window width is < 768px for example
Hello. I am a subscriber who likes you. Thank you for always learning everything about React. There was a problem this time. Also, downloading your GitHub didn't solve the problem. The problem is below. It is different from the video ".navbar{ background: transparent;}". The navbar does not become transparent and turns white.
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 👏
Same here, thank you so much
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!
Yeah, it would be better to add the event listener inside the useEffect and then also add a clean-up function that removes it.
how the useEffect hook could be used so that it doesn't cause said problem friend?
@@gabrielprrd what would be the solution in the code? some example?
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);
}
}, []);
I'm currently in the progress of learning React JS/Native. Thank you so much!
For those of you who leverage NextJS, you have to use useEffect around the window.addEventListener :
React.useEffect(() => {
window.addEventListener("scroll", changeNavbar);
}, []);
God sent 🙏
thanks
thank you
You fixed my problem. Thanks
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);
}
And here was me fretting over it!!!
thanks a million man!
Greattttt thanks a lot, i'm learning React and i've been looking exactly for this, your form is so easy
Let me share some code to improve memory usage:
useEffect(() => {
const changeHeader = () => {
if (window.scrollY >= 80) {
setActiveHeader(true);
} else {
setActiveHeader(false);
}
};
window.addEventListener('scroll', changeHeader);
return () => {
window.removeEventListener('scroll', changeHeader);
};
}, []);
Each time that Header mounts on the UI, a new function is associated with the Listener...
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.
Thank you for your clean step by step explanation.
I am applying it to my intern project.
I liked your tutorials. I am sharing your videos my friends. We wait a lot of react js tutorials.
Thanks! I have another react website tutorial I'm editing right now, so it'll be up in a few days
@@briandesign Now I am learning react js. If I have questions realted to react js, could I ask?
sure
I'm currently in the progress of learning React JS Thank you so much!
Still super valid and super simple! Thank you!!!
Thank you, very good and straight-to-the-point tutorial!!
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!
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
Thanks a lot, styled components is nice but it kinda makes everything feel different.
@@favourp i think i like yours better
@@ekweisking2023 Did it work?
Why did you use event listener outside the useEffect? I think it's an anti-pattern for react though.
Anyway to add a smooth transition like in css transition: .1s;?
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.
I am ur big fan. Following all your videos
Appreciate it Dheeraj!
Love your channel man ! Great work, thanks for the efforts !
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?
I haven't! I'll have to look into that
Awesome tutorial, thanks Brian!
this is what i am looking for
thankyou very much
I am using this logic to solve other problem on my web application
I've been looking for this thank you man
anytime!
Awesome. Works with react-bootstrap too. Many thanks
When you position your scroll bar at exactly the 80px y, the animation keeps triggering. is there a way to stop this?
subscribed!!! thank you Brian I was looking so hard for exactly this
Glad I could help!
@@briandesign is there any source code though im following the video but it would be nice to see sc?
thank you very much!! It helped me a lot
Thank you very much, I was looking for this.
No prob!
really cool man thanks a lot one. Really well done.
You always nail it man. Kudos
Thanks!
Thanks man. Super helpful!
thanks a lot for such a beautiful tutorial
Dude that so fancy, thanks !!
any idea why instead of transparent my navbar keeps showing white ?
awesome man this helped me heaps thanks
That was helpful my friend , thank you :)
Glad it helped!
Thanks, helpful and very clear explanations.
Thanks Enzo
Thank you very much for this video.
Thank you so much for helpful content
Hey you solved my problem thank u so much, and subscribed.
Thanks Ali!
Thank you so much! Subscribed!
Thanks Bonnie!
Thank You, It was Helpful.
Glad it helped!
how will we apply this condition under styled components?
What if I already have a conditional check on my navbar class? Is there a way to add an additional check?
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
Thanks man!
thanks you can also put the addEventListener in a useEffect
Thank you so much you are amazing...
Thanks dude :)
Thank you very much budddy
thanks brah, very helpful
Bro Thanks so much for this video!!
Thanks!
Great video, thanks man
Amazing as always buddy!
Thank you! Cheers!
Amazing! Thank you \m/
bro u r a real GOD KEEP MAKING VIDEOS BROOO!!!
Thank you, I will
Great tutorial! Subscribed!
Thanks!
Thank you. Very simple stuff, but we wonder if we are doing it right XD
Thanks, and yeah I got this straight from the docs
@@briandesign oops. I meant that we always wonder how these components are made, but it turns out it's this simple
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!
this is what I'm looking for
where did you get that amazing background
is it svg
please share resource if you can
thanks
how'd you get the navbar on top of the image/video of the hero section?
You should've mentioned that this must go in useEffect otherwise it is too much of event. Other than that, thank you for tutorial.
UseEffect and Checking the mounted state, else you get an error for Window is not defined. Especially for nextjs where the server renders the page first.
Thanks for this
thanks from brazil
When using 'Back' button, browser remembers scrolled position, but navigation has initial transparent color. When scroll - it changes color as it should. Does anyone know how to display scrolled color with 'Back' button?
Full video of this project from starting?? Can anyone share the link
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
Please, help me!
Thank you very much
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
Its not working at me, it shows white space in navbar
Thanks for sharing 🙌
Thanks a lot dear
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?
how i can do this in nextJS also this method is not working in nextJs.
good job
How did you add the rotating planet in background can please share the link or help me
I want to do it too
it's just a video
Thank you very much !
Good video! Thanks!
I'M GLAD I SAW THIS. THANK YOU SO MUCH!!!
anytime!
thanks bro , you are best
Thanks Rofix!
isnt this a bit expensive as the function will be run on every single scroll
thank. you so much
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?
Thanks so much!!!
Thank you boss
excelent!
oh men you are good, thanks
Thanks Yacouv!
Thank you so much!!!! hey i have a question do you know how can i do a dropdown in the menu using NavLink ?????
I made a dropdown navbar vid, so you can check that out and then refactor it using a NavLink
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!
Great. thank you so much
Thanks Namoz!
make sure you remove the event listener once the component is unmounted
very good
Man, how would you use Intersection Observer in this???
Great video, which VSCode theme are you using ?
you're the best
Hey man, love the tips! I came here from the last vid, one thing is when I make the navbar class background: transparent; it does make it transparent but it's leaves a white box up top where the navbar used to be and once you scroll you can see the navbar information like logo and links with a transparent background. How do you get rid of that white box across the screen. I just want it to look like yours at the beginning of the video.
Can anyone help me with this issue? I've been trying for some time, and I'm concerned I'll have to restructure the website totally.
@@naiadbaksh3996 Man, I took a long time trying to solve this issue too. So I had the idea to access the cover style file, where the video is, and in the main container I put margin-top: -80px (since the height of the navbar is 80px, and so the video went up on the screen, to behind the navbar).
It will be necessary to make other adjustments, such as adding a background-color to the navbar when resizing it, in the media queries, and adjusting the alignment of the central text of the cover, centering it.
Hi Brian excellent tutorial. I'm having a problem with the navbar when the hamburger menu is displayed. It gets transparent and the menu gets black. How can I fix it?
you can try adding a negative margin: -80px; to bring the hero section up cause it sounds like the navbar is stacking on top of the hero section, so you could bring that section up. Or if you wanted to keep the color of the nav the same as the mobile menu, then you can create a function that changes the color of the nav to black if the window width is < 768px for example
Hello. I am a subscriber who likes you.
Thank you for always learning everything about React.
There was a problem this time. Also, downloading your GitHub didn't solve the problem. The problem is below. It is different from the video ".navbar{ background: transparent;}". The navbar does not become transparent and turns white.
Thank you all the time.
.navbar {background : transparent;} nok working
Add margin-top: -80px cause it’s there it’s just above the hero section
@@briandesign I solved the problem. Thank you so much. I respect you.