代码之家 › 专栏 › 技术社区 › Sonaryr

位置粘性与父填充顶部

sticky css3 css html

Sonaryr · 技术社区 · 7 年前

我想做点有用的事 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; 对他们来说。字符串的作用是,只要我在父对象中有足够的对以产生溢出,这就可以工作。如果我没有溢出,我的头得到额外的25像素以上的间距,我不想。

我就是这样想的:

编辑:这是在chrome中测试的。

1 回复 | 直到 6 年前

PIIANTOM FRAGA 7 年前

粘性有点棘手,仅仅因为它是固定位置和相对位置之间的混合体。对粘性元素使用与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