Video Summary

All right, we’re about to play with the sticky value for the position. And let me just lay out what we have right here for the HTML before we start hopping the CSS that we have just an h1 tag, let’s just use a filler headline. The h2 will be the sticky element that we’re going to use when we scroll down the page and I have a few paragraphs right here just to have the scrolling ability. Alright, so what I want to do is I’m just going to come over here to h2, and I’m gonna make the color blue. 

So as we begin to scroll to the very top, it just stays right there. No matter where we’re at on the page. As you’re scrolling down, it stays at the very top. Maybe you want a little bit more spacing. So let’s try 20 pixels, and we keep scrolling down and now this element stays right here. Right. So the difference between the sticky and the fixed is if I claimed that this menu or this heading was fixed, and let’s try that. So if we do fix right, so now we’re basically putting that, that, or that headline right there, and no matter where we move it, it does not move. But if we have a sticky the headline as the page loads stays in the same place if we had that tag there or not. And it’s not until this section reaches a 20-pixel buffer that it starts to then become fixed and it stays right there. And then if we scroll down, it stays right there. Alright, so we could even let’s just add another headline. Let’s add a few of these. Let’s go 123. And we’ll just make sure this works. 

So now if so now we have four h1 tags, and as we begin to scroll, now that sticks there and you’re wondering why the sticky is kind of important because if you think about nav menus is that not every menu Nav menu is the same sometimes you have a top nav bar where you just maybe have information like your phone number, your email, or maybe just quick access for your social media accounts. And then the actual nav menus below that where you have your logo, the different pages you want to offer to allow people to go to and make it maybe you don’t want the top, the top header, or the top bar where it has your contact information on there. And you just want to be able to just have this section scroll with everyone, right, or scroll with the content as they visit user goes through your website. So that’s where the sticky position comes in. And it’s a pretty powerful tool and this is how you’re going to be able to manipulate your nav bars and certain elements that you might want to just keep as a sticky element as it scrolls down. But again, you can only use it from the top side position property, you’re not gonna be able to use bottom left or right and if you wanted to see if that works or not, let’s just put in left and we scroll and we’re not seeing the there’s elements stick there if we want to do bottom, scroll, nothing when we have it at top it will stay right there after we scroll. 

So that’s the position property that there’s another position, positional values, but they’re very rare. you’re there don’t really add much value to what we’re going to be doing. And those ones will we’ll be able to manipulate certain elements that we want to within the page builder, and not necessarily using CSS. So that being said let’s hop on to the next section.