Why does a sticky element stop when it reaches the bottom of its container?

Question

It's clear what's happening is when the element of class 'sticky' becomes 10% from top of the viewport its position becomes fixed but stops becoming fixed when it reaches the bottom of the container its in.

My understanding is that elements that're fixed don't behave like this.

Is there any documentation that explains this?

<head>
  <style>
            .sticky {
                position: sticky;
                top: 10%;
            }
  </style>         
</head>

<div style="height: 150px; margin-top: 100px;">
  <div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
  </div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ab,
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe!I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?. voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
</div>

I added different duplicates explaining how sticky works – Temani Afif May 26 '20 at 19:44 — Temani Afif, May 26 '20 at 19:44

score 1 · Answer 1 · answered May 26 '20 at 16:05

The sticky div is sticky within its container. And the container is still scrollable. If you want it to be sticky according to the viewport you are not allowed to have non-fixed elements above it.

You would need to set position: fixed to the container for this to work as probably expected (and a margin to the content to ensure it's not hidden by the sticky div).

.sticky {
  position: sticky;
  top: 10%;
}

.wrapper {
  position: fixed;
  height: 150px;
  margin-top: 100px;
}

<div class="wrapper">
  <div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus
    itaque voluptate?.
  </div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ab, Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere
  non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni
  nostrum! Saepe!I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat
  repellendus itaque voluptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi
  nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem
  ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam
  maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit
  doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?. voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio
  reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores
  recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae,
  vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium
  recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
</div>

1. Quite confused on the topic, any resources you could point me towards? 2. MDN said "Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned." The additional rule I deduce is that it will become `fixed` for the duration it's in its parent container. (Which is not the rule with normal `fixed` right? — tonitone, May 26 '20 at 16:53
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46 — Paul, May 26 '20 at 16:57

Why does a sticky element stop when it reaches the bottom of its container?

1 Answers1