粘性元素到父溢出容器

Question

注意：容器的位置必须是absolute，因为我的插件需要。

<div class = "container">
  <div id = "element1">
  </div>
  <div id = "element2">
  </div>
  <div id = "element3">
  </div>
</div>

.container {
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;

  background-color: yellow;
}

#element1 {
  background-color: red;
}
#element2 {
  background-color: green;
}
#element3 {
  background-color: blue;
}

Answer 1

list需要移到#element3之外;但如果您需要这种容器，请尝试...

小提琴：https://jsfiddle.net/rfornal/y3qs8nxv/

.container

尝试这样的CSS ...

<div class="container">
  <div class="inner-container">
    <div id="element1"></div>
    <div id="element2"></div>
  </div>
  <div id="element3"></div>
</div>

Answer 2

在您的标记中，#element3位于.container内。

但在您的图片中，#element3位于.container之外。

您有两种选择：

1. 撰写标记，以便#element3在.container之外;或
2. 添加选择#element3的JavaScript，然后将其移至.container
之外