Bootstrap 5 Transparent Navbar to Solid Color on Scroll

in this tutorial we'll create a bootstrap 5 transparent navbar that will become a solid color when you scroll down okay so I have created a simple project here there's quite a bit of HTML with the nav bar involved so I don't recommend coding it from scratch I would just go to documentation and copy one of their examples and then modifying it to get exactly what you want so I have a background image here the background image has been taken out of the normal flow right position absolute so it's not taking up any space um right so it's really important that you have mastered the underlying fundamentals like CSS and JavaScript as a bootstrap developer so I have courses on them if you want to take them to professional advanced level check out my courses on them the links are in the description but what we want is that when we scroll down we get this and also when we scroll up again that the background gets removed so first of all how do we even get it to scroll with us well the nav bar here if we just add a utility class from bootstrap fixed top if we do this it will scroll with us all right so that's step one and now what we want want is to get that background color so we're actually going to create a class for that so we're going to add a class once the user has started scrolling and this is the class that we're going to add to that nav bar we can call it nav bar scroll so we're going to say background color I'm just using black here you can use any color you want now what can also look good sometimes is if you have a bit of a box Shadow so maybe you can see it a little bit better here on the white so there's a very subtle box Shadow as well so I will also add that now it's just going to be zero three pixels vertical offset 10 pixel blur and then the color will be black with 15 opacity so this class right now we can add it so we can see if that works scrolled so now I've added this to the nav bar and indeed we do see it right but we only want to add this once the user has started scrolling so we need to we need we need to use a little bit of JavaScript here so again make sure you know JavaScript make sure you know CSN so you know understand how all of this works also because we're going to use a transition here so make sure you understand animations and transitions in CSS definitely check out those links in in the description but what you can do is at the end of the body here for example you can also create a whole new Javascript file it's also possible but I don't want to make it too too complicated here I'm just going to add a script here to the bottom and to to deal to manipulate this this element here we need to select it first so we can say const nav and I like to append L to indicate that we're working with an HTML element and then I can select it with document query selector I want to select the elements with a class of navbar right so then we're selecting this element right let me collapse this because there's quite a bit of HTML I'm selecting this element here and I'm storing it in this variable and then what we're going to do is we're going to listen for the scroll event so there is a window object and we can listen for for several events and the the event that we're interested in here is the scroll event right so when the user has started scrolling and when that has occurred we can fire a function right so you could use the old school function syntax or the modern Arrow function syntax I'll use the modern uh syntax right so again make sure you you you have mastered JavaScript itself so what we can do then is um this event will fire as soon as you scroll even a little bit right but we don't want to add this nav bar when it has crawled a little bit not only when it has scrolled a little bit more like that the height of itself actually and the height of this nav bar by default is is is 56 pixels so we want to add we want to add that class when the user has to scroll down by 56 pixels so what you can do is you can say if window.scroll Y is more than 56 right this is what you can use to check for that so this event will fire you know for every little pixel that you scroll right we don't want to do anything for every little picture only right if we have another check here if the window has of if the window the scroll wine property is at least 56 pixels or equal to 56 pixels we're going to use that nav element we're going to say class list we can remove classes but here we want to add a class and the class that we want to add what do we call it navbar Scrolls right so this is the class that we're going to add so now if I save here and go back now when I scroll down you can see it gets added right let me refresh here so when I scroll a little bit doesn't get added but if I scroll enough it gets added right but it's not smooth because it just you know there's no transition here it just immediately gets added so now we're going to work with CSS transitions so what you can say because what this what this will do is it will apply these declarations to that nav bar right so it's going to change the background color and the Box Shadow properties and what you can do is you can make it a transition so you can select the nav bar and you can say transition for all properties that get changed it shouldn't happen instantly it should it should happen in 0.5 seconds right so now when you do that any change will happen in 0.5 seconds right so that's much smoother and also now we have to work on um if the user Scrolls up again right so if I scroll up here it should be removed again so how do we do that while scrolling up is also um well a scroll event right so we can still work in here this function will still get fired if we scroll up so here we do something when the scroll when the user scrolled past 56 pixels we can also check if the user has scrolled some somewhere built before 56 pixels so if scroll Y is less than 56 then we can say nav l.classlist dot remove right we can remove it right I'm not using I'm not using less than or equal because the equal case is already handled here right so I don't want to have any overlap right so now it should be removed so let's check it out so now let me actually refresh right I'm scrolling down it gets added now scroll up it gets removed very smooth right all right by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 23,832

Keywords:

Id: z70GTU3p72I

Length: 6min 35sec (395 seconds)

Published: Mon Oct 31 2022