Tutorial

How To Make Elements Stick with CSS position: sticky

Updated on March 15, 2021
Default avatar

By Alligator.io and Andy Hattemer

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:

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.

Note: Check our flexbox primer if you’d like a refresher on the different flexbox properties and values.

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

Sammy the Shark with a punk theme.
Sammy the Shark with a magical pony theme.
Sammy the Shark with a dinosaur theme.
Sammy the Shark with a steampunk theme.

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

Warning: There are two common scenarios where a position: sticky element will not stick to the window as intended:

No inset property has been defined: Make sure the sticky element has top or bottom set. Or in the case of horizontal scrolling, left or right.

One of the element’s ancestors has incompatible overflow: If any of the parents or ancestors of the sticky element have overflow set to hidden, scroll, or auto. This also applies to overflow-x and overflow-y.

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.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers - for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Learn more here


About the authors
Default avatar
Alligator.io

author


Default avatar

Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Great article. That warning section saved my life. Thank you so much.

Great presentation and useful mention of cases where it won’t work. Thanks.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel