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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.