Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply position: sticky to child of a div

Tags:

html

css

Position: sticky doesn't seem to work for me when I apply it to a child of a div. How to solve?

HTML:

Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
</div>
Lorem Ipsum

CSS:

.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

Example: https://jsfiddle.net/n8Le2tva/

like image 737
Bob Avatar asked Jul 20 '17 17:07

Bob


3 Answers

Your sticky element is working as intended, you can't see it because your container div is as short as the sticky element itself, so as soon as it sticks, the parent container is already scrolled out of view.

If you add the br tags inside of the parent div then you can see it stick. Once you scroll past the parent then it will scroll with the parent and will not be visible anymore as you can see from your original fiddle. Example on this page https://developer.mozilla.org/en/docs/Web/CSS/position

If you are trying to dock this for the entire page then you just need to place the sticky element under a higher level div, for example a div that contains all page content. Just remember when it sticks it only sticks within the parent container

https://jsfiddle.net/n8Le2tva/3/

HTML

<div class="this-parent-div-is-necessary">
  <div class="div-sticky-class">
      Test
  </div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/>
</div>

This example here https://jsfiddle.net/n8Le2tva/10/ I moved the sticky element out so it sticks to the overall viewport

like image 160
Huangism Avatar answered Oct 09 '22 00:10

Huangism


Put everything inside your this-parent-div-is-necessary container.

.div-sticky-class {
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
<div class="this-parent-div-is-necessary">
  Lorem Ipsum
  <div class="div-sticky-class">
    Test
  </div>
  Lorem Ipsum
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
like image 40
Monkey_Dev1400 Avatar answered Oct 09 '22 00:10

Monkey_Dev1400


Sticky position only works inside the parent div, your html should be like this:

Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>
     <p>It will works here too</p>
   </div>
</div>
Won't work here because it's outside the parent of div-sticky-class
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

https://jsfiddle.net/n8Le2tva/7/

like image 43
Moisés Ñañez Avatar answered Oct 09 '22 00:10

Moisés Ñañez