How To Make Elements Stick with CSS position: sticky

Introduction

You may have used the CSS position property with the relative and absolute values in the past. Modern web browsers now support the sticky value. It allows you to make elements stick when the scroll reaches a certain point.

An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element.

In this article, you will create an example that uses position: sticky to understand how it behaves and functions.

Prerequisites

If you would like to follow along with this article, you will need:

• An understanding of CSS property and values.
• A code editor.
• A modern web browser that supports position: sticky.

Using position: sticky

Consider a div container that will be a flex container. Nested inside will be 4 additional div elements that will be the flex items. The 4 div elements will contain images for shark-1, shark-2, shark-3, and shark-4.

In your code editor, use the following markup:

<div class="container">
  <div class="item shark-1">
    <img
      src="/images/punk.png"
      width="100"
      alt="Sammy the Shark with a punk theme."
    >
  </div>
  <div class="item shark-2">
    <img
      src="/images/pony.png"
      width="100"
      alt="Sammy the Shark with a magical pony theme."
    >
  </div>
  <div class="item shark-3">
    <img
      src="/images/dino.png"
      width="100"
      alt="Sammy the Shark with a dinosaur theme."
    >
  </div>
  <div class="item shark-4">
    <img
      src="/images/steampunk.png"
      width="100"
      alt="Sammy the Shark with a steampunk theme."
    >
  </div>
</div>

And add the following styles:

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

In this example, the align-items: flex-start rule on the flex container is important because otherwise flex items default to a value of stretch where the elements would take the whole height of the container, canceling the sticky effect.

Save this file and open it in a modern web browser:

Scroll up and down and observe the sticky behavior. Notice how sticky-positioned elements are only sticky within their parent element.

The first and second sharks are sticky relative to the top of the containing block established by the viewport. The third shark is sticky relative to the bottom of the containing block established by the viewport. The fourth shark will not scroll to a sticky position because it was not assigned position: sticky.

Conclusion

In this article, you created an example that uses position: sticky to understand how it behaves and functions.

As of 2020, 95% of browsers have some level of support for position: sticky. For details, reference Can I Use CSS position: sticky. Older versions of Safari will require the -webkit vendor-prefix. Ensure that your target audience can utilize this feature before incorporating it into your web applications.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.