“滚动容器内的CSS位置元素已固定”

Question

我想知道是否有人找到了解决方案？

我正在寻找一种将元素附加到滚动容器顶部的解决方案

HTML：

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

所有“元素”都有position:relative，

该容器具有以下CSS：

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

我希望标题保留在容器的顶部，而与容器的滚动位置和下方的元素无关。

到目前为止的CSS：

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

所有元素都是块元素，并且我不能将标题移到容器之外。目前无法使用jquery。

Answer 1

我认为您的解决方案通过position:sticky。似乎像position:fixed，但尊重其父母的相对位置。

Answer 2

jQuery UI为此添加了position()实用程序方法，这将使您的生活更轻松。

Answer 3

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

Answer 4

您将找到有关此解决方案的最佳答案是此链接How to fixed scroll div after certain height and stop after reach other div? 我希望这可以节省一些谷歌搜索时间

Answer 5

这是我想出的使用position: sticky的解决方案（很遗憾，没有IE）：