应用位置：粘到一个div的孩子

Answer 1

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

如果你在父 div 中添加

br

标签，那么你可以看到它粘住了。一旦您滚动过父级，它将与父级一起滚动并且不再可见，正如您从原始小提琴中看到的那样。此页面上的示例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

Sticky position 只在父 div 内有效，你的 html 应该是这样的：

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

https://jsfiddle.net/n8Le2tva/7/

Answer 4

好吧，它实际上在工作。但是带有

div-sticky-class

类的div 在另一个移动的div（带有

this-parent-div-is-necessary

类）中。好吧，如果你想让它工作，你可以给外部 div 相同的类，例如

Lorem Ipsum
<div class="this-parent-div-is-necessary div-sticky-class">
  <div class="div-sticky-class">
      Test
  </div>
</div>
Lorem Ipsum

Answer 5

您很可能想将粘性应用于标题的导航链接，而不是徽标本身。

<header>
  <img src="/logo.svg" alt="Logo"/>
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/">About</a></li>
     <li><a href="/">Contact</a></li>
  </ul>
</header>

这是您可以使用的潜在 CSS。

header {
  position: sticky;
  top: -100px;
}

这样，标题的底部就是看起来很粘的部分！

如果你的图片没有固定尺寸，top 值就得通过 JS 来计算。然后，你可以找到ul并将top属性设置为img的负高度。

当然，在桌面视图上，您很可能希望整个标题元素都带有 img，所以在您的桌面布局宽度上只需将 top 设置为 0，并使用 css 断点。