Fri. Feb 3rd, 2023

[ANSWERED] html – Why does a sticky element stop when it reaches the bottom of its container?

By

Nov 20, 2022 css, html

Solution 1 :

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>

Problem :

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>

Comments

Comment posted by Temani Afif

I added different duplicates explaining how sticky works

Comment posted by tonitone

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

Comment posted by medium.com/@elad/…

medium.com/@elad/…

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

Leave a Reply Cancel reply