 Hi there, my friend and friends, people often use position fixed instead of position sticky when sticky would actually solve some of the problems that they're running into. And it also opens up fun effects like this one right here. We just make things magically appear. We'll be looking at some of those things that position stickies actually better at that people use position fixed for. We'll see how we can do this fun effect that we just looked at right here and a couple of other useful use cases for it as well. And so to get started with that, I have this example that is right here that we're going to play with where I have a fixed box here will become fixed and a sticky right there. And they're just in you can see box fixed and then we have a box sticky right there and we're going to sort of see the differences between them and just because I like having better color contrast, let's say color is black on that so we can read the text inside them a little bit easier. So the first thing we're going to do is look at what happens when we do a position fixed and then we'll look at the position sticky to compare them. And when I first do fixed, it looks like absolutely nothing has changed. But if I scroll the viewport, we can see that it's now fixed in place. And fixed is except for a few really small edge cases. It will always be fixed to the viewport and scroll along with it or yeah, won't scroll as everything else scrolls by position sticky can often feel very similar. But it's always a little bit weird because you first put it on and it doesn't actually stick and it doesn't actually do anything. But let's say I have a bottom and we're going to start with top bottom is a bit of a weird edge case that we're going to get to after. But if I do a top sticky in a way it's similar but it's going to look like it's not working until it reaches the top of the screen. And let's put a top zero here actually just to compare the two because at this point they'll look like they're exactly the same. But when I get to the bottom here, that sticky won't escape its parent and it stays up and scrolls off fixed comes out of the flow and it really stays out of the flow whereas sticky is sort of in the flow gets pulled out but can never escape from its contained lock like that and it stays right there. And whereas fixed as soon as I did that top zero you can see if I don't declare the top zero, it will stay where it originally was in the flow even though everything will come up around it. But as soon as I declare a position on that or a top or whatever, it will go where I want it to. And so that's already a pretty noticeable difference between the two right there right so very big difference now one time where people use position fixed when they probably want to use position sticky is if they have a navigation so actually let's comment these out for the time being and if we come in here and I go all the way up I already have one ready so we can turn that on just a very simple nav like we're used to seeing styled it up a little bit and let's go here and it's all in my header so we're just going to come in right header here and on this header we can try both and let's start with a position of fixed and so just like that fixed one here as soon as I declare this it's pulled out of the flow and you'll notice that everything else is moved up underneath it you can see that's there and it also shrunk down so I can come back here and say with 100% again and just to be safe we can do our top zero and this is often what people want where we're scrolling down and it's fixed at the top the problem is we're covering some of the original content here and this is a silly demo so I'm not covering anything important but a lot of the time we have our hero area or some you know it's our big cool thing that we're making that homepage look really good and then all of a sudden part of it goes underneath that and it sort of stinks if I come and I change this to position sticky I solve that problem because position sticky is part of the flow until it sticks and then as soon as I going it's stuck to the top zero and it's exactly the same thing but without having to worry about adding like a padding or margin or something on your body to accommodate the height of your navigation so right away really nice use case this will just continue to go forever with the page because the header is my first thing that's inside my body and as long as it's the first thing or as long as like the body is the parent you never have to worry about it getting stuck like this one was getting stuck before and like actually scrolling off if you do have it nested within other things then you always run into that potential where something might scroll away now one thing you could do with if you're using a position fixed though let's put this header back to a position of fixed but instead of a top we can give this a bottom of zero and it's going to go down to the bottom of the page and be stuck there and maybe that's what we want I don't think it looks fantastic in this use case but there you go that works if I make this a position sticky on the bottom instead it doesn't work and it seems like the bottom zero is not working and that's a little bit frustrating and it's sort of like why it should just be stuck to the bottom so for this we're actually going to turn off our header and go back to this silly example but I'll be back in just one second because I need to add a little bit of content to this page all right so I've updated I've added a little bit of content over here so we can see we have some paragraphs there and as we're going to run into a bit more on the sticky side but I want to focus on the fixed side for just one second which is here or I have my top zero that we saw before and if I do a bottom of zero just to reiterate it goes to the bottom and now it's fixed to the bottom of the page over there and it just sits there and it can't move it's just where it lives now whereas if we do the same thing with our position sticky and you know what let's just turn off we don't really need the fixed anymore so I'm just going to remove that whole thing from here and then we can just worry about the position sticky one so for now I'm going to let's keep this one at a sticky to the top just so we can see that it will stick to the top and slide down and you can see I've added a second sticky box here which is just we have my first one here then we have another content with another one there and when we get there it's this one stays with its parent and it pushes away because the parent is moving off and then the second one sticks and it sticks to the top and you would think that if we switch this over to bottom we'd get sort of the same behavior maybe upside down or something but it doesn't actually change anything it just looks like regular flow and you feel very defeated and this is where sticky is a little bit strange in this context but what we're going to do is take sticky here and move it down to the bottom and we're going to take this second sticky and also move it down to the bottom and the first one it won't actually stick you can already see the second one is sort of sticking and the reason this one is not sticking is because it never actually reaches the bottom of the screen the second one here however you'll notice how it's actually pushed to the top it's at the very top of the content now and it's going to stay there and it's going to stick to the bottom until it goes back to its natural resting place where it was originally in the flow so it's sort of the opposite behavior of when we had this at the top where it would stay in its natural resting place scroll scroll scroll and then if it got to that top zero then it would stick and of course this i've only been using zero but i could do like a two rem here and then it's going to stick two rem away from the bottom so as i go there it doesn't stick until it's there's a gap of two rem on the side over here so we can see that it's going like that and then it sticks and so yeah it's basically the opposite instead of being in the natural flow and then sticking at the top it will stick to the bottom of the screen until it gets to its natural flow and it's really weird it's a bit of an edge case and kind of strange and you probably won't use it too often but it's one of those times where when you do want to use it and you're really frustrated about why it's not actually working you really do need to make sure it's at the bottom of the content in the first place and then realize it will go to the top of the parent sticking to place until it gets to where it originally was you might be asking why would i ever want to do something like that but that's actually how i created the effect on this one right here where we had that show up at the end just like that uh and the way this is working is really interesting but we do need to use you can see i have a position sticky and i have the bottom that is set right there so we're it's basically stuck there the whole time but uh and it's it's part in this content i have my content box and then i have the end here and the real trick is with how i'm doing this is i have two things so let's actually take this white or let's just drop the opacity of this one down to like a point two so we can see behind it and the entire time the end is always there and it's stuck with the parent and it's flowing along stuck at that point or how far 10 rem off the bottom of my page and then as i'm scrolling i'm scrolling i'm scrolling eventually the parent is there and it goes along with the parent and just to show you where the parent is let's add a border on there like two pixels solid red just to make it easy to see and so you can see it's always staying two rem away from the bottom of the page until it gets back to what its natural resting place actually is and then the rest of the parent just sort of flows off and it goes along with it and so yeah it's a nice little fun way to make that type of effect i don't think it's something you would use on every project but it could be a cool little addition that you could have for certain things to sign up for your newsletter that magically appears or something like that and it creates sort of a fun little unexpected behavior maybe this could be improved if there was a shadow on something but yeah i think it's a fun little way to have that type of effect but there's also more practical ways that we can use position sticky here i have my content here and then i just basically just have content with headings and what i want to take a look at here is what we can do with it and a bit more of a practical use case so we can play around with it a little bit so on these they're called content and we're going to get rid of the background color on them because i don't think with the background color it would be something you'd really want to keep but it illustrates how it's going to work and then when we turn off the background color it's when it looks a lot cooler so we have the content here and i'm actually actually i'm going to wrap this in a media query somebody at media i'm going to say width is greater than let's say 800 pixels and this is the new range syntax for media queries that is in all browsers now though it's relatively new so browser support is not fantastic but for demos or personal projects you can get away with it but you might just want to do a min width 800 if it was an actual project and my content is going to get a display of grid with a grid template columns and let's just say it's going to be 100 pixels and then 1fr so it gives me two columns which isn't the greatest thing in the world right now but then what we can do and this should help illustrate one of the gotchas with position sticky as well that we can run into so we're going to say content anything that is not an h2 will be a grid column of two and that just means the paragraphs should all live on the right side except it is not working why not because i forgot my period right there so there we go and we can also go and let's take the height off of these because we don't really need the height on that it will sort of break how we want to do things there we go so we have all my content that is smushed together a little bit now but it looks a little bit more like how we'd actually you know have things minus the background color so a little bit of setup work but we got there so we have my headings that come here and then we have the text that's there and that's really important thing and of course when we get to too narrow over screen they stack on top of each other because we don't really want this to happen at narrow screen sizes and let's just also add a gap here of two rim just so things aren't too stacked together perfect and with that now I can say that inside let's just say content and choose the h2s that are there and of course this could be a class of like you know the heading or sticky heading or whatever you want to do for it and we're going to say that the position is sticky and we're going to say that the top in this case let's do like a one rim just so it's not going to actually stick you know it should help it stick where we want it to be and then you can see the heading is sticking to the top and scrolling down and just if I did a zero there just to show you why I put one rim it sticks a little bit too close to the top of the page in my opinion so we're going to keep that at one and then it sticks and it's sort of there and then it stays within its original one so it's sticking and then this one comes and then the next one comes and the next one comes and so on and so forth and it doesn't look too fantastic right now but if my content we have it right here or we'll go up to the original declaration even though it's a little messy because I had all that other demo stuff here but we take off the background color there and all of a sudden things look a little bit cooler where we also want to take off the text color like why did all my text disappear why is it a low opacity so now when I scroll down the first heading sticks while we're there and then the second heading is there and then the third heading and then the fourth heading and so on so we stay it sort of like keeps the heading for that content there as we're scrolling down which is kind of neat and a fun little effect and then it goes back that way and when you do it like this it can look like it's not really working properly at times depending on how you set it up and that's one of the reasons I wanted to originally have the background color set on it so we could actually see what it's sticking inside of and then why is it pushing off and if ever you have something that's not sticking or it's going away before you think it should go on the parent and add a background or a border or something so you can visualize what's happening because when we don't have those things it's much less obvious what's actually going on and I've made an update to my text here to make it one big paragraph and this same issue can happen if you're using display flex instead of display grid just because of how flex works and we'll explain it once I see what it is but you'll notice even though I kept everything else the same things aren't sticking and that can be really weird so as I just said turn colors on and in this case if you put the borders on the parent you won't see it so you can also put an outline or borders on the children to see what's happening and the item that I want to stick isn't sticking because it's stretching and it's actually reaching the bottom so the you know normally we were if this was actually going to stick we need the height to be here the whole height it's filling up the parent is going away so if the parent is going away right let's add a border here border of five pixels solid did it be black and we have the padding there so like it has nothing to stick to because it's already being pushed off on the bottom over here and so if ever this happens which display flex by default is going to have that item stretch or grid will if you only have one you know it's two cells here it didn't do that before because I had multiple cells coming so this was just living within that top cell so just those types of things they can catch you off sometimes are these and it's very easy to fix just where you have your display flex or your display display grid you do an align items of start and that just pushes them all to the top so they're not taking up any room and now when I go it will actually stick into place because it has room to go down and go into and that would be the exact same fix if you're using flex box and this is one of those things that can be infuriating so turning on the border on the parent can help and if that doesn't help turn the borders on on the thing that should be sticking at the very least so you and then often what you see is it's actually stretched out and then once you've solved that problem you turn off all your borders and you get that same effect coming back in and it can look pretty neat once again just like we had before and while we sort of looked at the basics here we can do a lot more with position sticky like with what you can see going on on the screen right now which is something I built out a little while ago using primarily position sticky to look at how we can tell a story using CSS and if you'd like to see how I did this or watch this video it is right here for your viewing pleasure it was a lot of fun to put together so I hope that you do enjoy it 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 call on the internet just a little bit more awesome