应用位置:粘贴到div的子级

Question

位置:粘贴对我来说似乎不适用于我将它应用于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 和粘性元素本身一样短，所以一旦它粘住了，父容器就已经滚出视图。

如果您br在父 div 内添加标签，那么您可以看到它粘住了。一旦你滚动过父级，它就会随着父级滚动，并且不再可见，正如你从原始小提琴中看到的那样。此页面上的示例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/我把粘性元素移了出来，所以它粘在整个视口上

Answer 2

将所有东西放入this-parent-div-is-necessary容器中。

.div-sticky-class {
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

<div class="this-parent-div-is-necessary">
  Lorem Ipsum
  <div class="div-sticky-class">
    Test
  </div>
  Lorem Ipsum
  <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/><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>

Answer 3

粘性位置仅适用于父 div 内部，您的 html 应该如下所示：

.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>Lorem ...</div>
   <div>
     <p>It will works here too</p>
   </div>
</div>
Won't work here because it's outside the parent of div-sticky-class
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>