Div 应仅在其他 div 内修复

Question

我就是无法正常工作：

我有一些部分。在一个部分中是 div。我希望这个 div 在可见时立即修复，并在用户滚动到下一部分时停止修复。然后 div 应该被粘在它所在部分的底部。

希望我能解释清楚。

Here is a little sketch to show what I mean

我想使用 position:fixed 而不是 position:sticky，因为第二个大部分时间都不起作用。

感谢您的帮助！

Answer 1

您为什么不想使用 sticky？这是一个似乎可以满足您要求的示例

section {
  width: 100%;
  height: 100vh;
  background: red;
}

section:nth-of-type(odd) {
  background: blue;
}

section div {
  position: sticky;
  top: 0;
  height: 100px;
  width: 100px;
  background: white;
  border: 1px solid black;
}

<div class="container">
  <section><div>Im sticky</div></section>
  <section><div>Im sticky</div></section>
  <section><div>Im sticky</div></section>
</div>

Div 应仅在其他 div 内修复

Div should be fixed only inside other div

html

css

fixed

js-scrollintoview