A bit sticky

ATTENTION!

This article is over 4 years old, it may be outdated!

Published on 09/20/2013 | 20.09.12013 HE

I just stumbled upon a very handy CSS Property: position:sticky. As far as I found out it’s only working in Chrome and Chromium with the experimental Webkit Features Flag enabled (see at chrome://flags/#enable-experimental-webkit-features).

position:sticky is a pretty handy feature that allows you to stick an element to the top of the page (or wherever you want) until the parent element is moved out of the screen.

Basic Markup

To get an idea of how position:sticky works I made some basic markup.

HTML

<article class="single__article">
    <hgroup class="single__article--header">
        # article header, this one will be sticked
    </hgroup>
    ...
</article>

CSS

.single__article {
    # classic article styles
}

.single__article--header {
    position:sticky; /* general CSS3 */
    position:-webkit-sticky; /* webkit prefixed */
    top: 20px; /* Space between the element and top */
}

What position:sticky does is:

  • When the elements Parent (.single__article) is scrolled
  • It sticks the header to the top of the page (in other words it gets fixed)
  • And scrolls it with until the Parent gets out of the way
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
.sticky {
  position: fixed;
  top: 0;
}
.header {
  width: 100%;
  background: #F6D565;
  padding: 25px 0;
}

See the Demo on CodePen

Resources:

Categories

Tags

Like this?

This website contains no advertisement, no tracking, no paid articles, and no shady-things-whatsoever. It is just content, provided free of charge and with accessibility in mind.

If you would like to support me in providing content - and code - for free or if this page has helped you or your company, consider supporting me directly.

You can support me via:

A colorful image of me wearing my DIY mask. The image has a colorful glitch effect.

Kevin Gimbel

is a DevOps Engineer and avid (Video) Gamer. He’s also interested in Sci-Fi, Cyberpunk, and dystopian books.

Wearing a mask is a good idea!

You can find out more about me if you wish.