Easily change sticky nav styling on scroll

do you have a navigation that sticks to the top of the page as the person Scrolls but once the person starts scrolling you'd like the navigation to change color like you can see right here or maybe you don't want to change the color but you want to add a shadow or something like you can see right here well sadly we don't have like a stuck pseudo class or something like that that we can use in CSS but luckily we do have intersection observers in JavaScript and they make this actually pretty easy to do so to get started with this the first thing that we need to have is a navigation so I've set one up here all in my primary header and this is what I'm going to be focusing on if you have a different setup just follow whatever works for how you want to be doing things for me this header is going to just be going all the way across as we're going to see in a second so that's why I want to be styling that now jumping over to the CSS I have done some basic styling here but the important part here is this position sticky that I've set up just so it keeps it on the top of the screen so if we go and take a look at what I have right now you can see that we have the navigation bar all the way across which is in that primary header and if I scroll down it sticks to the top and right now it's really awkward because the color of it is matching the background color which looks fine here but then when it covers content it looks really bad and of course if I didn't have a background on there at all it would be even worse because then it's a little bit transparent and it just makes things really hard so we definitely want it to change when we scroll down and you will notice here that I have put some custom properties these custom properties will make life a lot easier when you're making changes they're not necessary but all I've done is I have my BG color here the logo color is down on the logo class and the link color is on there so those are things that you'd want to be able to change it's much easier because you only need one selector later on when you actually are making changes to it but again it's not necessary it's how you want to work what we're going to be focusing on here is the JavaScript to get all of this working and as you can see we're starting with nothing so the first thing I'm going to do is let's make this a bit bigger because we are going to be writing some JavaScript and we need to get two things the first thing we need to get is the navigation itself so we're just going to come in right away with a primer Mary header here as a variable just using my query selector and grabbing my primary header nothing too fancy with that and then there's different ways that we could actually do this we could actually look for something like the H1 here or like the next element in it and look for when that's passing by in an intersection Observer would work for that the only problem is if you have different setups for different pages it could be a little bit harder to have consistency there and so if we do everything on the JavaScript side since we're already having to use JavaScript for this anyway it just makes it a little bit easier to be consistent and I actually got this idea from a blog post by Ryan Mulligan which I will link to in the description but I really liked it for this type of thing so what we're going to do is create another variable here and I'm going to call mine scroll Watcher because that's pretty much its entire job is to watch for when we're scrolling uh it could be like navigation intersect or whatever you want just give it a name that to you makes sense because naming things is hard and here instead of selecting something that's actually on the page what we're going to do is do a document.com create element and we're going to create a div so the reason we're going to do this again is just to make life a little bit easier we don't want to have to come in and like remember to insert something on every page in the HTML or something like it's annoying doing that so this will insert it into our document for us now just to make life a little bit easier for when we see it in the Dom to know what it's actually there for and if ever you need to select it or do different things with it what we're going to do is add an attribute and so we can say is our scroll Watcher we can do a set attribute and I'm going to do a data attribute of scroll Watcher and when you set an attribute you do have to provide it what you're setting it to in this case I don't need anything I just want to have that data attribute on there and the last thing we want to do is actually insert this actually into the page we've created it within JavaScript but we want to insert it somewhere so we already have our primary header selected there so we can take our primary header and then we need to say before and then we can say scroll Watcher so now if we jump back into our HTML and we go and take a look in here in our Dev tools we should be able to see that we have our primary header and then we have this data scroll Watcher right here so again if you open up and you're seeing this and you're wondering if you just had an empty div here you'd be very you would have no idea what this is um so it is Handy having something on there that just gives us a little bit of context to what it's actually doing and by having that on there the idea is we can judge when that goes off screen or on screen and then we can change the styles of other things because of that so to be able to do this we're going to create our intersection Observer and so I'm going to say const nav Observer and you can call it whatever you want here it's going to be equal to a new intersection Observer and there we go that's what we're going to be playing with now when we use the intersection Observer Constructor we need to pass it a callback function and optionally we have options that we can also use which we'll take a look at in a little bit but to start with we'll just add in a callback function here we could create a sec like a function and actually bring it in but it's really small what we're going to writing here so I'm just going to include it right here and so just like an anonymous function right there using an arrow function and so let's start we're going to keep things simple to begin with we'll have to make a few little changes here but we can say primary attribute class list and we can toggle that and I'm going to toggle a class called sticking because whether it's sticking or not sticking so now this exists but it's not actually being used yet so we do need to call this so we can say NAB Observer and then we just tell it observe and we have to tell it what we want it to be observing so we want it to watch our or be paying attention to our scroll watcher so with that in place if I come and take a look here we do our inspect we have my primary header and you can see it's already sticking this is an issue that we'll fix in a second but it is there and if I scroll down it will turn off and if I go up it goes back on so it's sort of backwards at the moment but at least it's working and we can see that it's doing something so that is a start at least so as a way to understand what's actually happening here and I'm not deep diving the intersection Observer here in depth because I have covered it really in depth before I'll link to that video in the description but here what I'm going to write is entries and this is well let's just put that there and then here we're going to do a console log console log of our entries to see what they actually are and basically when our intersection Observer is going it can be watching a lot of different things even though in this case we're only going to ask it to watch one but it returns an array of the different things and gives us information on those so if we jump on over to our console we can see here we have the array coming in intersection Observer entry and if I take a look in there we have only one of them so there and I can get information on it so is visible is intersecting and a lot of other things that are on there and having this is intersecting as true or false so if I if I scroll off you can see that it should be here again there we go we can get that information and now it is switched over to false and then as we go up and down it goes to true and false every time so what we want to do is we want to know is that one actually intersecting or not so we don't need this here anymore and this is another thing that I got from Ryan Mulligan so I would encourage you to check out that blog post that I mentioned but instead of doing like an if else statement which you could definitely do here but we can actually do this toggle in a bit of an interesting way because when we use this toggle method here we can actually provide it a second parameter and the second parameter here is when we saw that let's just bring this back on for a second we do need to get like we have our intersection of absorber entry we want to get this zero one here right here so we you know we we need the array itself so there's other ways we can get it but I'm just going to say that my entries and say zero so we're just getting the information from that first one and the main just do is intersecting this is really cool um and basically that means the toggle is going to work actually it's going to work exactly the same as what it's doing now but if we want to switch how it's working we can actually just say is not so basically we're saying if it's not intersecting right and what this second parameter is doing is it changes a little bit how the toggle works so if this is false if if this is returning false then the toggle can only remove a class and if this is returning true then the toggle can only add a class and so is it not intersecting as long as that is false then we're only removing the class and then if it is true then we're only adding the class so that's going to just sort of basically turn the behavior that we currently have on its head so if we go back to our Dev tools right here we can see that now that primary header when the page loads is not getting that sticking class and when we go like that we scroll down it's sticking and now it's no longer sticking so we've inverted the behavior that we just had before so with that done now what we can actually do is come back over to our CSS and I can take my primary header and we can just say sticking and we can change things and this this is where it's really nice to have custom properties that are locally scoped and that's also why I put these underscores here just to sort of indicate these are private properties they're they're scoped here that's just an optional way of naming things but then I could change my background color here and let's just make that lighter let's just change my logo color because why not we'll make it we'll add some we'll make it red and then the link colors here can also let's make those also turn more to a red color just so we can see that things are going to change so I can hit save on that we can shrink this down and when I scroll now we can see that it switches over so right away I think that's like a nice little Improvement well not really an improvement it's still pretty ugly uh but it at least it's working uh and then of course you can come through and set like transition uh background color and 500 milliseconds or whatever you need and for now I'm just going to take these two off and we're just gonna play with that background color and so when I scroll down you can see that it's working and then turning off so and it transitions that as a scroll and then it goes back when we get to the top of the page now you might not want it to happen from the very top you might want to wait until you've scrolled a little bit before that comes into effect so we could do that either with CSS selecting our scroll Watcher and that's why it's kind of nice to have this attribute on there because then we could select it with our CSS or alternatively we could pass the option to our intersection Observer and I'm going to do it that way and again these this option could be separated and then you could bring it in but I'm just going to put a comma here and then another set of curly braces and in there I'm going to write root margin and root margin it's going to be a string so you need your parentheses there and you can either do it as percentages or pixels but just make sure that you include pixels so I'm going to say 200 PX but of 0 is 0. and even though these are zero they need to have a unit on them or it will not work and return an error and if this works just like margin so I'm saying 200 pixels from the top and then 0 on the left the right and the the bottom here so now if I save that and I come it's going to wait until I've scrolled 200 pixels down and then you can see that the logo or the the background changes and then when I get back up it changes back the other way so it's always going to be in that threshold of 200 pixels because that's what I've set it to here rather than being at the top of the page and of course I'm coming through here and I'm setting this just on like some basic styling on this we could be doing this with all other things like we saw at the beginning with your different shadows and other stuff going on though I would recommend if you're going to do it with a shadow that's coming underneath rather than doing or animating the Shadow with the transition that comes in and out is actually to use a pseudo element instead because it's better for performance and if you'd like to know more about how to set that up and why it's better for performance I have a video that covers that right here and if you'd like to know more about intersection observers and deep diver into them that video is also right here and with that I would like to thank my enablers of awesome Enrico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 65,627

Keywords: Kevin Powell, css, front-end, frontend, html, web development, sticky navbar html css, sticky navigation bar, sticky navbar, change navbar style on scroll, sticky header, sticky navigation bar on scroll, sticky navigation bar html css, sticky navigation bar on scroll using vanilla javascript fixed navbar on scroll, sticky navigation bar javascript, sticky navbar css

Id: V-CBdlfCPic

Length: 12min 11sec (731 seconds)

Published: Tue May 16 2023