Full Screen Sticky — CSS
position:sticky is one of the sweetest CSS things I have played around with lately.
Messing around with it, I developed a way to keep a full screen scrollable layout, without hijacking the native browser scroll. I call it Full Screen Sticky.
I think there’s plenty of room to really push the boundaries with this technique, and i’ll be adding more examples soon.
- Using just CSS* we can keep images, videos, anything, at full-screen while the user can natively scroll the main content.
- Allows scrolling seamlessly into the next full screen page, or section of page. No annoying scroll-jacking.
- Uses simple CSS vh units, we can remove the need for 100% heights on body or html tags.
- CSS position:sticky is already supported natively on firefox, safari, and mobile safari, and mobile chrome, with desktop chrome support coming very soon. performance on devices is very good.
* although you may want to use a polyfill until at least Chrome supports it natively which is promised very soon!