Position sticky with parent padding-top - html

Question

I'm trying to make something work with position: sticky; but I get some strange behaviour.
.parent {
display: inline-block;
height: 300px;
width: 300px;
overflow: scroll;
padding-top: 25px;
}
.parent--ok {
background-color: green;
}
.parent--nok {
background-color:red;
}
.sticky-header {
position: sticky;
top: 25px;
background-color: purple;
}
<div class="parent parent--ok">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 3</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 4</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
<div class="parent parent--nok">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
I made a pen here https://codepen.io/anon/pen/NzJENe so you can see what I mean.
I have a parent element that has a padding-top: 25px;, in there I have an undefined number of div pairs consisting of a header and a content. I want the headers to be sticky but with respect of the 25px padding of the parent. So I added top: 25px; to them. String thing is that this works as long as I have enough pairs in my parent to have an overflow. If I don't have an overflow my headers get an extra 25px spacing above, which I don't want.
this is how it looks for me:
EDIT: This was tested in chrome.

Answer 1

Sticky is a bit tricky, just because it is an hybrid in between fixed and relative positioned. Using top different from a 0 value for a sticky element may lead to strange behavior. I guess this is what you experienced in Chrome.
More over, you have different behavior with different browsers (or not)...
I would go for an additional container (in the sample, named .holder to preserve this padding-top of 25px.
HTML
<div class="parent parent--ok">
<div class="holder">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 3</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 4</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
</div>
<div class="parent parent--nok">
<div class="holder">
<div class="sticky-header">Sticky</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
<div class="sticky-header">Sticky 2</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>
</div>
CSS
.parent {
display: inline-block;
height: 300px;
width: 300px;
padding-top: 25px;
}
.holder{
height: 100%;
overflow: scroll;
}
.parent--ok {
background-color: green;
}
.parent--nok {
background-color:red;
}
.sticky-header {
position: sticky;
top: 0;
background-color: purple;
}
This is the Jsfiddle