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.

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!

Show your support

Clapping shows how much you appreciated Sam Featherstone’s story.