您的sticky元素正在按预期工作，您看不到它是因为您的容器div和sticky元素本身一样短，所以一旦它粘上，父容器就已经滚动到视图之外了。
如果你把br标签添加到父div中，你可以看到它会粘在一起。一旦你滚动过父div，它就会和父div一起滚动，并且不再可见，就像你从原来的小提琴上看到的那样。本页上的示例https://developer.mozilla.org/en/docs/Web/CSS/position
如果你想在整个页面中停靠这个元素，那么你只需要把sticky元素放在一个更高级别的div下，例如一个包含所有页面内容的div。
https://jsfiddle.net/n8Le2tva/3/
超文本标记语言

<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/我把粘性元素移到了外面，这样它就粘在了整个视口上

把所有东西都放进你的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>

粘滞位置只在父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/

它实际上是工作的。但是类为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

最有可能的是你想应用粘性到导航链接的标题，而不是标志本身。

<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的负高度。
当然，在桌面视图中，你最有可能希望整个header元素带有img，所以在你的桌面布局中，用css断点将top宽度设置为0。