Apply position: sticky to child of a div

Question

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/

Tegantegmen

Can you share more of your CSS; such as the parent div CSS? overflow:auto in a parent element prevents sticky from functioning in Safari. I assume Safari is a concern based on your use of -webkit-sticky – Juvenility

You'll need javascript for this or get rid of the parent somehow. firefox understands display:contents jsfiddle.net/n8Le2tva/1 but what's the point ? display:inline would do too jsfiddle.net/n8Le2tva/2 – Chutney

@Tegantegmen Here jsfiddle.net/n8Le2tva/3 add brs inside of the parent, your parent is too short for it to stick, it is sticky relative to the parent div – Nyx

@GCyrillus, two fantastic solution, but they don't work on Safari... – Tegantegmen

then, mind javascript to take care of it. it is the most solid way at this time :) – Chutney

@GCyrillus thank you, I will use Javascript :( – Tegantegmen

@Tegantegmen what are you trying to achieve? It doesn't look like you need js – Nyx

Answer 1

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

Nyx

@GustvandeWal None really, it's just Emmet, the code completion toolkit: emmet.io - Most text editors already come with it. FWIW, I use Sublime Text. – Matriculation

Answer 2

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>

Housework

Answer 3

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

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

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/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

Valedictory

Please add some explanation on why it was not working before – Nyx

The lorem ipsum text was outside the div with class "this-parent-div-is-necessary" – Normandnormandy

Yes Sagar! The sticky will work if the elements are inside the parent div of the sticky element – Normandnormandy

@MoisésÑañez still does not explains why it doesn't work and if you put div-sticky-class element anywhere it would work. It has nothing to do with the parent, the only thing parent need to have is enough height(defined or filled by content) so when it sticks, it can be seen – Nyx

@Nyx sticky position just works with siblings elements – Normandnormandy

Answer 4

Well it is actually working .But the div with class div-sticky-class is inside another div (with class this-parent-div-is-necessary ) that moves. Well if you want it to work you can give the outer div the same class e.g

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

Munday

I can't apply it to parent div. – Tegantegmen

@Tegantegmen look at the fiddle in my comment – Nyx

Answer 5

Most likely you are wanting to apply sticky to the nav links of a header but not the logo itself.

<header>
  <img src="/logo.svg" alt="Logo"/>
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/">About</a></li>
     <li><a href="/">Contact</a></li>
  </ul>
</header>

Here is potential css you can use.

header {
  position: sticky;
  top: -100px;
}

This way, the bottom part of your header is the part that appears sticky!

The top value would have to be calculated by JS if your image does not have a fixed size. Then, you can find the ul and set the top attribute to the img's negative height.

Of course, on desktop view, you would most likely want the whole header element sticky, with the img, so on your desktop layout width's just set top to 0 with css breakpoints.

Learned