Layout & Design

Fixed and Sticky Positioning in Framer (Fundamentals Lesson 9)

Joseph

4:10

52K views

Dec 5, 2024

About this lesson

Fixed and Sticky positioning are two essential modes for controlling how elements move (or don’t move) as a visitor scrolls through your pages — but each has it’s own unique behavior.

In this lesson, we’ll explore how and why to use each — to keep important elements in view exactly when and where they’re needed.

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=0s Intro

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=3s Fixed positioning explained

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=24s Setting fixed position in Framer

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=51s Pinning to the viewport

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=86s Fixed elements and content flow

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=116s Sticky positioning explained

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=146s Sticky positioning example

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=156s Requirements for sticky positioning

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=177s Using sticky offset

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=191s Sticky positioning in action

https://www.youtube.com/watch?v=nPk_qEPrLwk&t=205s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00fixed and sticky positioning are two 0:02essential modes for controlling how 0:04elements move or don't move as a visitor 0:07Scrolls through your pages but each has 0:09its own unique behavior in this lesson 0:12we'll explore how and why to use each to 0:14keep important elements in view exactly 0:17when and where they're 0:19[Music]0:21needed let's start with fixed 0:23positioning a fixed position element 0:25stays in the same spot on the screen no 0:27matter how far the user Scrolls for 0:30example think of a nav bar that never 0:31leaves the top of the screen or a 0:34floating action button that stays in the 0:36bottom right corner either way it's 0:38something that you want to keep visible 0:40at all times when we set an element to 0:42fix position it anchors itself to the 0:45viewport which means it's tied to the 0:46browser window instead of any particular 0:49frame on the page to use fix positioning 0:52we first need to make sure that our 0:54design element in this case the nav bar 0:56is a direct child of the breakpoint 0:58frame now will have no problem switching 1:01the position type from absolute to fixed 1:04you might notice the positioning 1:05controls that appear look similar to 1:07those used for absolute positioning but 1:09rather than pinning to a frame it's 1:11pinning to the viewport itself with this 1:14in mind I'll pin my Navar to the top 1:16left and right edges of the viewport 1:19this will keep it positioned at the top 1:21while allowing it to scale horizontally 1:23making Its Behavior a bit more 1:25responsive also similar to Absolute 1:27positioning is that when an element is 1:29set to fix it's removed from the content 1:31flow of the stack this means it'll no 1:33longer push or pull other elements 1:35around it allowing it to float above the 1:38other content on our site so if I 1:40preview my site you'll see that my nav 1:42bar is fixed to the top and the rest of 1:44the content Scrolls underneath it it's 1:47that easy if you have issues with things 1:49not overlapping properly don't forget 1:51about that zindex property that we 1:53talked about in the lesson on absolute 1:55positioning now we know that fixed 1:57positioning keeps an element locked to 1:59the viewport at all times but sticky 2:02positioning on the other hand allows an 2:04element to scroll with the content until 2:06it reaches the top of the viewport then 2:08it sticks in place temporarily before 2:11the bottom of its parent frame Scoops it 2:13up and makes it continue scrolling again 2:16this is great for things like sidebars 2:18headers card layouts or even subnav that 2:21we want to stay visible for part of the 2:23scroll but not the entire time in this 2:27example I have a pricing card next to a 2:29ser of images and I want my pricing card 2:32to stick to the top of the screen as we 2:34scroll past the images the first thing 2:37to know when using sticky positioning is 2:39that our layer must be the child of a 2:41stack or grid and every parent frame all 2:44the way up the hierarchy needs to have 2:46overflow set to visible or sticky just 2:50won't 2:51work okay so now that everything is 2:53ready I'll set the position type of my 2:55pricing card to Sticky we also get an 2:58offset property to find how far down 3:01from the top edge of the viewport this 3:03thing should stick I'll set this to 100 3:05pixels to give us a little cushion of 3:07space with that set I'll switch over to 3:09preview mode to see how it looks and 3:12there we go the pricing card sticks to 3:14the top of the viewport and stays 3:15visible as the images to the left scroll 3:18past then when the bottom of the parent 3:20frame hits the bottom of the card it 3:22gets scooped up and starts scrolling 3:24again so now you've got a clear 3:27understanding of fixed and sticky 3:29positioning and you know when each one 3:30comes in handy fix positioning for 3:32keeping Design Elements locked in place 3:34at all times as users scroll and sticky 3:37positioning to let elements move with 3:39the page until they hit the top of the 3:41viewport and then start moving again if 3:43and when their parent container Scrolls 3:45out of view with these position 3:47techniques you're ready to design 3:49layouts that keep Essential Elements 3:51right where they're needed within easy 3:53reach for visitors we've just got a few 3:55more layout tricks to cover so I'll see 3:57you in the next 3:58one e

TeachesSticky & Fixed

Also coversAbsolute Positioning Breakpoints Frames Grids Plans & Pricing Responsive Design Section & Anchor Links Sizing Stacks

Watch on YouTube ↗

‹ All-new Framer Analytics

Framer Awards: We're giving away $100,000 ›