Color theme Dark mode Font size Content width


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

A bit sticky

Published on 09/20/2013

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.


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


.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') :

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

See the Demo on CodePen




Like this?

If this content has helped you or your company, consider making a donation to a good cause.

For example, consider donating to the following causes:

A Selfie of me

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.