POSITION STICKY

"Ok moving on. Let's take the relative off, we don't need that anymore. So I can do a couple of cool things right, on this one, let's put it into design mode. Let me clone a few of these, right? Let's just do another one. And what we might do here is just change the image so it doesn't look so... so it's not the same. We've got sticky on. Let's just choose a couple of images. We'll take that one and just random here, let's choose another one. We'll take this particular one in this case. I could choose better images, I don't have to have background image fixed on either. So on the front end, if I press save and we'll click view. Okay, we've got this situation, but I could decide that I want to make this text sticky. I want to make this text always stick. So let's go back. What we'll do actually, make this a bit cooler. Now we'll give this a bit of padding, make that look a bit cooler. And what we can do now is decide do we want to put a sticky side?

Well, which side do we want to be sticky? Well, in this case, let's put this side sticky, so this side continues to scroll. So now let's go to our sticky. And what we need to do is make this one say sticky. I'll just show you in the class here, it's added sticky, cool. But then what we also want to do is make it sticky side. So let's go over to put this on sticky side. And now let's go and have a look at this on our front end. So I'm just going to save and view. Now I'm going to scroll and you can see this side sticks or this side scrolls. Cool little functionality, I often use this in sidebar. I'm going to show you a sidebar episode where we stick the sidebar to one side, particularly if it's short navigation, we want to stick that nav so people can always see it. And then scroll this side, another call use case. What if this was a form? Sorry, that's a boat there just leaving in the harbor, right at the end as normal.

But I was saying there, always called if you put a form in there, and it might be an event timetable. It could be timestamps for this video, it's a particular long one. We might need to scroll that on that side. So there you go, you've learned some real advanced positional CSS there. And these are all functions of actual CSS. And these are all the ways that front end developers have to design in code when they set up their dibs in code. We can do here nice and easy within frames."