位置固定，父填充顶部

Question

我正在尝试使position: sticky;正常工作，但是却出现了一些奇怪的行为。

.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>

我在这里https://codepen.io/anon/pen/NzJENe造了一支笔，这样您就可以明白我的意思。

我有一个具有padding-top: 25px;的父元素，其中有未定义数目的div对，包括头和内容。我希望标头是粘性的，但要相对于父级的25px填充。因此，我向他们添加了top: 25px;。字符串问题是，只要我父母中有足够的配对对就可以溢出，此方法就起作用。如果我没有溢出，则标题会在上方多出25px的间距，这是我所不希望的。

这就是我的样子：

编辑：这已在chrome中进行了测试。

Answer 1

Sticky有点棘手，只是因为它是固定位置和相对位置之间的混合体。对粘性元素使用不等于0的top可能会导致奇怪的行为。我想这就是您在Chrome浏览器中所经历的。

此外，您在不同的浏览器上（或没有）使用不同的行为... 我会去一个额外的容器（在示例中名为.holder，以保留此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;
}

这是Jsfiddle