Position Sticky

[00:00:00]
>> Kevin Powell: Now we saw one of the problems that happened with my position fixed is the content wasn't aware that that fixed element was there, it slid up underneath. More recently, we got positioned sticky. It's been around for quite a while now, but it is out of all the positioning properties, it is our newest one. In a sense, it's a lot like position fixed, but it content is aware of it being there until it sticks.

[00:00:25]
So what I mean by that is exact same thing we had before, but if I do my page header, and I give this a position sticky instead of a position fixed, and I say the top is 0 like we did before, or actually, first of all, without doing anything else, just the position sticky, nothing has changed this time. It didn't shrink down, it didn't get pulled out of the flow, it's behaving exactly as it did before.

[00:00:52]
So it's easier to deal with in a sense, because of that, and as soon as I tell it where it should stick, the content doesn't go underneath. I don't have to add padding to my body, and it sticks to the top of the viewport. So it feels a lot like position fixed does, especially if it's the first element on your page, it feels exactly like what position fixed is. But there are some differences with what position sticky is, so let's go dive into those.

[00:01:20]
Here's another navigation. This is sort of a common pattern. You can't really read the text here, but you have a big hero area and your navigation's underneath it, and as you're scrolling down, this has a position sticky top 0, let's go find that actually. Intro, nav, top there, oh, I haven't done it yet. We have a position sticky, so if I go down, normally it just scrolls off. If I add my position sticky with the top of 0, now, when it reaches the top of 0, it sticks.

[00:01:55]
So it only is pulled out of the flow once it gets to the place where you told it to stick to. The rest of the time it stays in flow and all the elements still see it, so it doesn't lose, you know, nothing goes underneath until that point where it sticks here. One question I often get with this is, can we know when it sticks? Because you might want to, you have those nav bars that change once they stick.

[00:02:20]
It's in the works. I don't know if any browser supports it yet, but we are getting a query for the scroll state things, and there's like a stuck on stuck thing that's coming, so eventually we'll be able to. Right now, there's nothing we can do for that though. But nice and cool, works really well. It's super easy to do and it's a pretty fun use case of position sticky. However, there are some limitations to position sticky that we really need to be aware of, and the easiest way to compare them is to compare a sticky box to a fixed box.

[00:02:57]
So, well, here's this one's position fixed, this one's position sticky. I think I mentioned earlier on one of the biggest typos I make is a display of absolute. Turns out it's when I'm speaking as well. Position fixed, position sticky. The fixed one, first of all, is always fixed, so it's not waiting for my browser to go anywhere, it's fixed to that place. The sticky one waits until it gets to where I told it to, which was the 0 at the top, so it waits, it eventually sticks.

[00:03:27]
My sticky box is inside of something else. It's nested inside of this area. A sticky cannot escape outside of its parent, which means that as we scroll down, it eventually will scroll off with the element that it's inside of. So it's a really important difference. You can see it's a pretty cool behavior in a sense. I didn't, I got two lines of code and you can get that to happen is kind of mind blowing.

[00:03:52]
I remember when sticky first came out, it was very exciting. It also might seem a little bit weird that that happens. The fix just pulls out of the flow, stays there, sticky all of a sudden, it's disappearing at times, can feel a little bit strange. I just want it to stay stuck. It's not how it works. It's one of the side effects of it, it cannot escape outside of its parent. However, that does mean we can do some cool things with it too.

[00:04:25]
So here, I have a display grid, 2 columns. I have a section, each section is my H2, which is my title, and then the second one is the column of text that's just shooting down the side, and I've repeated that over and over again. You can see going all the way down. Each one of those sections is the two columns, which is why this is on the left side, this is on the right side. Also an interesting use case where I've used different values, we're not repeating, we're not doing something else.

[00:04:50]
I did a small size for that and a 1 FR on that side, so that side can adjust, whereas I know my title will always just stay in this small space, and on the title, I can say it's position sticky, and I gave it a top of one because I don't want it to touch the top. I want it to stay a little bit off, and you might have seen things like this on the web before. I'm trying to deselect it, there we go. While I scroll down, it will stick, but it can't leave the parent, and the parent is ending with this paragraph, so then we get section 2, and then section 3, and you have your titles that can scroll down with you and follow you as you're going down.

[00:05:30]
Just to show you why that's happening, I can add this border in here, and you can just see why it's going off because it can't escape out of its parent, so we get to the bottom of the parent, it pushes off, and the next one comes in. If you're having trouble with position sticky, like with most things in CSS at a border, so you can visualize what's actually happening, it's usually the best way to actually find the issues that are coming up is by using borders or other things to help you visualize and then things start making a little bit more sense.