Full Screen Sticky — CSS

Sam Featherstone
Jun 1, 2016 · 1 min read

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.

Check out the source, or view the CodePen demo in full screen

Video works fine too

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.
  • It’s made with straight up CSS, no need to re-init the javascripts*

* although you may want to use a polyfill until at least Chrome supports it natively which is promised very soon!

Sam Featherstone

Written by

Founder / Developer at forkdigital.com.au

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade