Polyfill.js Demo — position: sticky

What Is Position Sticky?

position: sticky is a newly proposed feature of CSS that allows you to conditionally position elements based on the user's scroll position. Elements that have a position value of sticky will remain in the normal flow until their top, right, bottom, or left value are less than or equal to the users scroll position in that direction. After that condition is met the element "sticks" in place, behaving very similar to position: fixed.

Paraphrasing from Edward O’Connor's original proposal of this feature:

Many web sites have elements that alternate between being in-flow and having position: fixed, depending on the user's scroll position. This is often done for elements in a sidebar that the page author wants to be always visible as the user scrolls, but which slot into a space on the page when scrolled to the top. Good examples are news.google.com (the "Top Stories" sidebar) and yelp.com (search results map).

For a more detailed look at position: sticky, this HTML5Rocks is very informative.

What to Look For In This Demo

Scroll down to see the demo in action, and resize the window to see how it responds at different media values.

The top navigation has the following declaration in the CSS:

.navbar {
  position: sticky;
  top: 0;
}

This means that the navigation should be in the normal flow up until the point when the user scrolls the page such that the navigation is zero pixels from the top. Once that point is reached, the navigation bar should "stick" in place until the user scrolls back in the opposite direction.

The sidebar's position: sticky declaration is in a media query and should only apply when the browser window is smaller than 40em. Here is what that CSS looks like:

@media (min-width: 40em) {
  .sidebar {
    position: sticky;
    top: 82px;
    float: right;
  }
}

When the window is wider than 40em the sidebar should be floated to the right, and when the user has scrolled such that the sidebar is less than or equal to 82 pixels from the top of the page. It will stick in place.

If at any point the window becomes smaller than 40em, even if the sidebar is currently in sticky mode, the entire declaration should be ignored and the sidebar should return to the normal flow.

The complete HTML, CSS, and JavaScript code is available in the position-sticky demo folder of the Polyfill.js Github repository.

Limitations

There is currently no W3c specification for the position value sticky, as such this polyfill is limited in scope. It is also primarily for demonstration purposes, and should not be considered ready for production code.

For example, only the top value is taken into consideration (not right, bottom, or left) and pixels are the only unit supported.

In addition, Chrome's implementation of position: sticky confines an element to within the bounds of its parent, which this polyfill does not attempt to do.

Keep Scrolling...

In order to see the scrolling in action, the page needs to be tall enough to scroll, do here's our old friend Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ligula lorem, eu dapibus nulla. Donec cursus interdum ipsum, sit amet cursus felis rhoncus eu. Duis sollicitudin dignissim sapien, ac placerat dolor rutrum vitae. In eu orci nunc, vitae feugiat neque. Fusce sed est vitae felis fringilla elementum. Aenean tortor justo, facilisis eu tempus non, hendrerit id nunc. Etiam blandit odio eget metus sollicitudin aliquam. Nam nunc sem, lacinia eget sollicitudin bibendum, suscipit vel arcu. Nullam in volutpat justo. Etiam non risus felis, vitae volutpat nisi. Morbi libero orci, porta vitae blandit quis, tristique ut risus. Aenean condimentum dictum dolor eu cursus.

Nulla sit amet odio leo, non vulputate massa. Aliquam et condimentum risus. Donec id enim nibh, vitae placerat dui. In hac habitasse platea dictumst. Vivamus ac nulla turpis, vitae aliquam dui. Sed malesuada commodo urna, vel ornare dolor mattis at. Mauris neque mi, fringilla nec sodales eu, accumsan sed purus.

Fusce ultrices, nisl accumsan pharetra scelerisque, tellus ante facilisis libero, varius dapibus lacus odio eu velit. Curabitur eu arcu vel neque vehicula eleifend aliquam a erat. In hac habitasse platea dictumst. Morbi elementum enim quis lorem suscipit sit amet aliquet tellus condimentum. In ullamcorper elit sit amet ipsum cursus in imperdiet arcu porttitor. Praesent eu est quam, a pretium ante. Duis et nulla tellus. Phasellus varius blandit eros sit amet porttitor. Etiam sodales, ligula eget porttitor commodo, quam metus tempus nisi, nec iaculis erat arcu eget leo. Maecenas augue eros, tempus ut iaculis at, rhoncus in tellus.

Phasellus dui justo, egestas non varius eu, fringilla a purus. Proin sodales tempus augue id posuere. Vivamus posuere facilisis sapien et pellentesque. Etiam quis facilisis urna. Nam vehicula justo vel mauris sagittis lacinia. Ut egestas metus nec risus suscipit id congue nisl elementum. Vivamus rutrum augue sit amet quam egestas vitae dictum nisi accumsan. Fusce ante dui, faucibus rutrum semper sit amet, varius et odio. Aenean auctor tortor non felis tristique bibendum. Quisque sem tortor, tempor sed posuere vel, vehicula a tortor. Praesent quam massa, vulputate sit amet accumsan eget, cursus ac neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti.

Demo: Position Sticky

Sidebar

What Is Position Sticky?

What to Look For In This Demo

Limitations

Keep Scrolling...