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

yo what is popping everyone so today i'm going to show you how to create this super simple navigation color change effect whenever you scroll on your web page in react so pretty much you've probably seen this on a bunch of websites and when i scroll let me show you what happens the nav bar changes color and then i go back up and back again so pretty much that's what i'm sure to make today and in case you are wondering this entire site how did i build this as well i have an entire tutorial showing exactly step by step on how to build that so i'll include a link in the bio somewhere you can click in there and watch that but in case you don't care you just want to know how to do this little effect on your specific nav bar then let me show you how i did this so i'm assuming you already have your nav bar created so basically i took out the effects so if i were to scroll here nothing happened so what i did and pretty much let me show you here so all you need to do is first of all go to wherever you have your navbar css and right now i have it on transparent so that's why it's see-through but whenever it's active i put this color this linear gradient so all you need to do is just put go whatever you named your class of your navbar whatever it is and then just add dot active on your css file and then this is basically the color here so if i were to go to my nav bar component this is my most outer this is my nav bar right here so wherever you're in your uh your code base where it says it shows your nav bar if i were to do add the active class and hit space and i refresh it now you can see that it's currently showing so as long as you have this working then all you need to do is write this simple logic and then it pretty much is set up so right now this is a previous code from the previous tutorial on this site so if you're wondering what this is then feel free to check that out but basically all we need to do is set the state so if you're following along from the previous tour you already have all this code then this will make sense but if you don't you're gonna need to do uh a little extra stuff but basically wherever you have your function i'm using hooks so i don't know you can probably convert this if you're having class components but basically functions is much easier to set this up but all you need to do is have your function and then have use state import at the top because if you don't then it's not going to work and then underneath here i'm going to go under and basically say cons and then i'm gonna put uh just say navbar as what i'm gonna pass in and then we're going to set the nav bar so i'm just gonna say set nav bar and this is basically going to change the value once i have the function i'm going to say use state and then currently i want it to be a false so right now i don't want it to uh whenever i have it like standard like this i just want it to be like that and then what i'm going to do here is i'm going to create a function so let me actually go underneath this code so it makes all sense so this is still inside right above the return of my navbar component so wherever in your code oh that would be right there and then what i want to do is create essentially a function that showcases the score so i can say um let me just call this change background say cons change background and then i'm gonna set this equal to an arrow function and then the curly braces and so right now what i want to check is if the scroll is actually working when we're here so pretty much i'm going to console.log and i'm basically just going to say window dot scroll y and it's basically going to check the y axis and then we're going to have to call the change background function so that we can actually see what's happening so pretty much i'm gonna say window dot add event listener and then we're gonna pass in the quotes it's gonna say scroll and i don't know why the how do i get rid of this ridiculous thing here but basically it's going to say scroll and then comma and then the function name so it's called change background which you saw that we created up there so now when i save this i'm going to click on the website and right now nothing's happening so i'm gonna do command shift c and then if i go to the console let me open this up so you can see it much bigger you can see it's currently working so right now i'm at the top so it's at zero and then boom you can see when i scroll it so that's good so make sure you have this here so you understand it's working and now all we need to do now is just write the logic to pretty much change the classes and then we are set so this part is the most simple it's just simple if else statement but pretty much here i'm going to say if i'm going to say window dots scroll y and essentially if it's greater than or equal to the size of my nav bar which is 80 pixels so if yours is 150 etc put it whatever your size is so if it's greater than or equal to 80 pixels i want to set the nav bar which is the state that we created up here up here right there and then pretty much i want to say i set this to true and then else if it's not so if it's basically less than 80 i just want to say set that bar to false so now when we save and we scroll over nothing's going to happen because we didn't actually apply this function to the nav bar so instead of doing a class name so go to wherever your nav bar div is so the one for this example is basically here so what i'm going to do is get rid of this class here and then i'm going to set it equal to curly braces and then if you notice in the state we have nav bar and currently it's like the it's like kind of hard to see it's like hidden because it's not being used right now so this we're going to utilize they're going to say nav bar and let me use ternary operator so question mark and then pretty much here we're going to say if it's true meaning if we scroll past the mark of 80 pixels then i want to trigger and set the class to nav bar as well as active and then if it's not if it's just chilling then i just want it to be the navbar class which is what it's currently at so if i were to save this and then you can see now it's changed to uh transparent so basically when i scroll now you can see it here so now if i go out boom scroll it now we got the little magic here so this is pretty much how to do it super simple super basic nothing fancy here so in case let me just go back to code in case you missed it but basically it's the change background function and then you add the scroll of that listener that uh basically calls it and then we have this javascript code sending it to either active or not and then the other set state up here so it's pretty simple react hooks if you're doing it another way then i don't know you could obviously uh refactor that but that's basically how i did this so if this video you enjoyed it definitely go down below and give that video a thumbs up subscribe you're new to the channel and if you want to learn how i made this website the entire link or even on my channel you'll see the video tutorial so you can check that out but aside from that i will see you in the next video peace

Channel: Brian Design

Views: 56,054

Keywords: react navbar, react navbar change color on scroll, navbar change color on scroll, react js, react js tutorial, react website tutorial, react effect, react animations, navbar color change, react event listener, react usestate, react hooks, react router, react website navbar, react scroll, change color of navbar on scroll, navbar react, beginner react project, react project, react tutorial, react tutorial for beginners, react navbar js, react, react web design

Id: JMsNslI8KoY

Length: 7min 43sec (463 seconds)

Published: Thu Aug 13 2020