position:sticky does not leave parent

Question

How can make an element sticky, so it stays at the top of the viewport? I want the element to remain sticky even if it leaves it's container.

I tried this

HTML

<div class="page">
  <div class="parent">
    <div class="child-sticky">
      <p>i want to be sticky, even when I'm outside my parent.</p>
    </div>
  </div>
</div>

CSS

.child-sticky {
  position:sticky;
  top:20px;
}

.page {
  height: 3000px;
}

Here's a pen to illustrate the problem. Scroll down to see what I mean.

https://codepen.io/pwkip/pen/OxeMao

Answer 1

Sticky works that way, it will remain sticky relative to its parent. You need to use fixed. Check this codepen

Answer 2

Already 7 months ago, but I found a CSS only solution if the element you want to be sticky is the last one of its parent, its very simple: Just give the parent element position: sticky; and also give it top: -xx;, depending on the height of the elements before the last one.

#parent {
  position: -webkit-sticky;
  position: sticky;
  top: -3em;
}

#some_content {
  height: 3em;
}

#sticky {
  background-color: red;
}

#space {
  height: 200vh;
}

<div id="parent">
  <div id="some_content">Some Content</div>
  <div id="sticky">Sticky div</div>
</div>

<div id="space"></div>
<p>Scroll here</p>