html - 应用位置 : sticky to child of a div

Question

Position: sticky 在我将它应用到 div 的子项时似乎对我不起作用。如何解决？

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;
}

示例:https://jsfiddle.net/n8Le2tva/

Answer 1

您的粘性元素按预期工作，您看不到它，因为您的容器 div 与粘性元素本身一样短，所以一旦它粘住，父容器就已经滚出了 View 。

如果您在父 div 中添加 br 标签，那么您可以看到它会粘住。一旦您滚动过父级，它将与父级一起滚动并且不再可见，正如您从原始 fiddle 中看到的那样。本页示例 https://developer.mozilla.org/en/docs/Web/CSS/position

如果您尝试将其停靠在整个页面上，那么您只需将粘性元素放置在更高级别的 div 下，例如包含所有页面内容的 div。请记住，当它粘住时，它只会粘在父容器内

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>

这个例子在这里https://jsfiddle.net/n8Le2tva/10/我将粘性元素移出，使其粘在整个视口(viewport)上