Hi everyone, in this video, see this little search bar here... imagine if you could scroll up, and oh, look at that... kind of gets stuck and doesn't get off the page... so we're going to look at something called sticky positioning... we'll also get the navigation and the bottom navigation... to stop scrolling as well, while we're here...

all right, let's jump in. First up I've got a kind of a trick layout, so I can see... my phone prototype at the same time as doing my working... I'll show you that at the end... so the things you need to do to make this work, there's a couple of them... first of all we need some content that overflows our frame...

I just use Lorem Ipsum, and just pasted it until it went over the edge... then we need to go to Prototype mode... and we need to make sure that the parent frame... we want to set the 'Scroll Behavior' for 'Vertical'... so now, it's not working yet, but you can see it's scrolling, whereas before... it wasn't scrolling, excellent, so now we need to make it sticky.

So I've just drawn some random stuff in here, looks like a search box... just a box with some text in it, you can see my frame there... and I'm going to select it, go to 'Prototype' mode and say... Scroll with parent, no, no, no, going to do cool 'Sticky' scrolling... 'Stop at Top Edge', that's it, it's going to kind of work, watch... ready, cool, huh...

I love this feature. Ours is not working, because, A, it sticks to the top... and it's hiding behind the notch... so we're going to add some padding to it... the easiest way to add some padding to it, is with an auto layout... so in 'Design' view I've got this selected...

I don't want to turn this whole thing into an auto layout... because if I did it's going to kind of work... but it's going to wrap around these two units... it's not what I want, what I want to do is put it in a parent frame... so I'm going to say, you, my friend, 'Frame this Selection'... so have a look over here, my search box frame is inside this parent frame...

called Frame 7, great naming, Dan... and if I add an auto layout to the parent frame, Frame 7, 'Auto Layout'... it's doing everything, and it's trying to shuffle everything around... but there's only one thing in it, search box... so now I can do cool things like... I want some padding, let's get a feel for how much we need first...

and then test it, and realize it doesn't work, it's gone, what happened? Wow, what happened was we applied stickiness to the original search box... not to this new parent frame that we just made... so just select the parent frame, 'Frame 7'... and don't Scroll with Parent, we want you to 'Stick it to the Top'... now it's good, hey, all right.

So it's kind of, we got to do some layout things, but there you go... it's how to stick our little search to the top, I love it... now a couple of other things before we go, one is, I set up this layout... you might be like, "That's easy," but if you're like, "How did he do that?"... what I did was - let's get rid of it for the moment  - what I did was is, you can actually open more than one version of Figma... in a browser, it's easier, but you can do it in the desktop version as well...

so I'm going to preview it, I'm on the wrong page, probably... let's have a look... I am, this one here... still doing its cool scroll stuff... is these are separate tabs, you can actually drag, hold... just drag it out randomly...

and now I've got two versions of Figma, if that blows your mind... don't do this... and what I do is, I just do a little bit of... desktop arrangement magic, just so I can see both of them... kind of drag that over there, this is over the top, that's what I do. Actually, I only do it for this tutorial, to be honest...

what I normally do is, have this open on this other screen over here... that you can't see, it's got all my notes... that's why I set that up. The other thing was, that I thought I'd mention here, we did it, the Essentials... but hey, let's throw it in here... is this, and this, I'm going to copy it, paste it...

the reason I pulled it off is because, watch what happens... they go away, and this thing's doing weird stuff... so basically the same thing... I'm going to say, you, Prototype, Scroll with Parent, nope... instead of doing Sticky to the Top, I'm going to say... 'Fixed', 'In Place', let's give it a go now...

look at that, oh, you still got to allow the padding... for this thing to look like it pushes up against the top... and we're going to work around the notch and the edges... we'll do that in a future video. The last one is this Nav at the bottom here, just kind of like... rolls around, follows the parent, we don't want you to follow the parent...

we want to say, you, Prototype... Scroll with Parent, nope, I want you to 'Fixed', 'Stay in Place '... look how cool we are... gets better in the future videos but, I don't know, it's pretty cool now... not sure what happened to this, here we go. All right, there is our feature, let's recap a few things...

you have to remember to do, just as a reminder... and things it can't do, so first of all, the parent frame that you're previewing... has to be Overflow, Vertical, doesn't work for Horizontal at the moment, or both... only in Vertical, that might change in the future... another thing is, is you can't get it to stick to the bottom and stack up... you can only get it to stick to the top, not the right, not left, not the bottom...

you have to have text that is overflowing, so you actually got something to scroll... you'll be able to turn on Overflow Vertical... but your preview won't move if there's not enough room... you could do a really nice list, which I should have done... or just a giant colored box, or Lorem Ipsum, like I did... and how did I get my Lorem Ipsum?

I actually went to Content Reel... I like Content Reel because you can go to Text, and you can say... you, I want some "Lorem"... "Lorem", hit 'Enter'... and kind of combines lots of other people's ways of making Lorem Ipsum... and I just went, I can't remember, "Lorem Ipsum Long", just fills it in...

I copied and pasted it a couple of times... but if you're old school and you don't want to use a plugin... ah, this site, anybody using this site... I've shown lots of people this site, you might be using it as well... the good old Lorem Ipsum site, so ugly... but everyone uses it, I want these many paragraphs, 'Generate'...

and you end up with this, and you can copy and paste it out... and get spammed by ads, intermittent fasting, according to my age... anyway, there we go, that is sticky scrolling... all right, I'll see you in the next video.