Sticky Navbar on Scroll With CSS | Change Navbar Color on Scroll With Javascript

in today's video I'm gonna teach you how to create a sticky enough bar that also changes color when you start scrolling a really cool effect to add to the website okay so structure already there then I'm gonna add an header here enough location and then three links one like that one I'm gonna call it home the second one sources and the third contacts okay then down here I'm gonna add a div with a paragraph with some Lauren text in it save that okay and then I'm just going to copy and paste it a few times like this okay save that okay as you can see that's already full okay then let's switch to the main CSS and I'm gonna start with the body so background color black then header background color black as well and then height 5 em display Flex align items Center okay okay then header navigation I'm gonna give it a padding 1.5 em 0 1.5 em 5 em and then I'm gonna style the links young elements so of course text decoration none then color White font size 1.3 pm and a margin of 1 am okay if we save that that's already looking so much better okay then just to make everything more like scrollable to show you that later on height pixels according to em6 em GM 6PM and then the paragraph font size this is just to make things bigger but of course you wouldn't do that okay but this is just to show you how the header is fixed up here then the color white of course okay like that really really good so as you can see you can scroll up and down okay so to fix the header here we can use position fixed but this is not the final solution okay so bear with me so position fixed then top zero of course okay we can actually change the color to white to show you as you can see the header has been removed from the content flow which means that all the content down here has been pushed up okay and that's beneath the header right now and this is now what we want so you first of all you would need to add a width to the header something like that also remove the margin of course this is what you should actually do you should actually use margin 0 here and then you would have to add a padding top to the body with 5 Em which is the height of the header okay if you save that as you can see everything works just fine okay but this is a little bit tricky you need to remember this and this and then you change the height and then you need to change the padding etc etc so let's go and see a better way of doing this okay so you can remove this we can remove this and here instead of fixed we can actually use let's go back to black okay we can actually use sticking okay if we save that as you can see everything works already fine okay so the header is here you don't need to add width 100 you've got you don't need to add a padding top and everything works because sticky doesn't remove the element from the content flow so for all the content down here the header is still there even when you scroll up and down okay as you can see header and body of the same color so we need to add some Transitions and JavaScript to make it better or at least change color you know to make it visible when we scroll up and down okay so first of all I'm gonna add a transition to the header okay so transition background color 0.4 seconds is in out okay then I'm gonna add a CSS rule for the header that applies when we'll add later on the class scrolled with JavaScript okay so header so it's called like this background color white and also to make a cool effect and a positive 0.98 okay then same thing here so we need to add a transition here so color 0.4 seconds is in out okay and the same for the scrolled class okay so header scroll now a color black perfect and of course nothing changes because we need to add the class with JavaScript so let's go back to the index.html let's scroll down here and let's add an event listener that gets triggered when we scroll okay so document dot add event listener when we scroll then our function this and then down here we get the header okay so document dot query selector like this then we get the element header then we need to check if we are scrolling or not okay because if you're scrolling we need to add the class and when we're back to the top we need to remove it okay so to do that we need to check the windows code y property which basically returns how much we scroll down in pixels in other words if we don't scroll this is zero if we scroll down it increases if you scroll back up it decreases until it gets back to zero Okay so if window done scroll y is greater than zero then we need to add the class so class list dot add scrolled header dot plus list but remove and we remove it like this okay perfect so if we save that and go here as you can see everything works so as you can see you start scrolling the class scroll is added all the properties that we set here applied and then when you go back to the top scored is removed and all the initial properties are used okay so if you don't know what what's next here you can see another really interesting video about web development click on it and I'll see you there

Channel: Fabio Musanni - Programming Channel

Views: 31,359

Keywords: web development, web dev, css3, css tricks, css tips, programming, sticky navbar, sticky navigation bar, sticky navbar after scroll, sticky navbar html css, sticky navbar on scroll css, css fixed navbar, css fixed header, css sticky header, css sticky navigation bar, css sticky navbar on scroll, css sticky navigation, css sticky nav, scroll navigation bar css, scrolling navbar css, scroll navbar color change, change navbar color on scroll javascript

Id: gbmV2Lh9dBM

Length: 7min 36sec (456 seconds)

Published: Mon Nov 28 2022