我认为你的解决方案通过了position:sticky。看起来像position:fixed，但尊重相对于他的父母的位置。
遗憾的是，这是一个实验性的功能，并且仅在Chromium中支持。您可以在this test page中查看更多详细信息。
我想到的纯css解决方案是对标记做一点修改。你可以为“元素”设置一个容器，如下所示：

<div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

然后把溢出的水倒入这个内胆。现在，你的头粘在上面。
是的。

以下是我使用position: sticky（因此不幸没有IE）提出的解决方案：
https://codepen.io/waterplea/pen/JjjMXzR
我们的想法是在滚动容器的顶部放置一个0高度的粘性容器，这样它就可以粘在上面，但不会推动下面的任何内容，然后将您的内容完全放置在其中。这样您就有了宽度，但没有高度，所以您只能从顶部放置一些内容，就像我在示例中对按钮所做的那样。

EDIT：找到了一种方法，使其具有100%的高度，并且不使用float推送下面的内容。更新了codepen。由于Firefox中的此错误，不得不使用calc(100% - 1px)：https://bugzilla.mozilla.org/show_bug.cgi?id=1612561

这种情况下的解决方案是将标题弹出到滚动元素之外：

<div class="header">title</div>
<div class="container">
    <div class="element">......</div>
    <div class="element">......</div>
</div>

尽管如果可能的话，您可能应该有更好的语义元素（这里只是猜测）：

<h3>title</h3>
<ul>
    <li>......</li>
    <li>......</li>
</ul>

jQueryUI添加了一个position()实用程序方法，这将使您的工作更加轻松。

$( "#someElement" ).position({
    of:  //Element to position against,
    my:  //which position on the element being positioned,
    at:  //which position on the target element eg: horizontal/vertical,
    offset:  // left-top values to the calculated position, eg. "50 50"
});

绝对帮了我。

使用容器 Package 要滚动的元素：height: 100%; overflow: scroll .
将滚动容器和标题放在另一个高度固定的容器中。
然后将position: absolute标头放入外部容器中。
第一个

最好的答案，你会发现这样一个解决方案是从这个链接How to fixed scroll div after certain height and stop after reach other div?我希望这节省一些人谷歌的时间
第一个

第一个

这就是我在一个可滚动的div中实现静态位置div的方法：

<div class="parent">
   <div class="fixFloat">:</div>
   <...some long elements here...>
</div>

.parent {
   position: relative;
   overflow-y: scroll;
}
.fixFloat {
   position: fixed;
   float: right:
}

用粘性的。绝对管用！
父容器：

position:relative;

子容器：

position: sticky; // fixed on the page