让元素滚动到其可滚动父元素的上边缘，然后粘在那里？

Question

我希望黄色标题向上滚动，直到它消失在视图之外，但是绿色容器应该粘在可滚动父级的顶部边缘而不是滚动。

换句话说，

foobar

不应该滚动到视图之外。

我的代码有什么问题？

<p>my page</p>
<div style="overflow: auto; height: 200px; background: red; isolation: isolate;">
  <div style="height: 100px; background: yellow;">
    header
  </div>
  <div style="height: 1000px; position: sticky; top: 0; background: green;">foobar</div>
</div>

Answer 1

使 div 具有粘性可能非常具有挑战性。最初，绿色容器的大小设置为 1000px。当尝试使其粘性时，如果其父级可滚动并且下面有更多内容显示，则它不会粘住。

但是，解决方案是将另一个 div 放置在绿色容器内并进行粘性定位。这种方法有助于元素按预期粘住。

以下是修改代码的方法：

<p>my page</p>
<div style="overflow: auto; height: 200px; background: red; isolation: isolate;">
  <div style="height: 100px; background: yellow;">
    header
  </div>
  <div style="height: 1000px; background: green;">
<div style="position:sticky;top:0"> foobar</div>

</div>
</div>

在此修订后的代码中：

绿色容器现在有一个内部 div，位置：sticky； top: 0;，确保它正确粘贴。

位置：相对；绿色容器的外部 div 有助于保持其上下文中的粘性行为。

此设置应该有效解决使 div 粘在可滚动父容器中的问题。