如何使孙子元素具有粘性？

Question

如何使左侧窗格（孙子）相对于主体是粘性的，但导航栏和主要内容是可滚动的。

<div>
  <div>navbar (should scroll away)</div>
  <div>
    <div>side pane (should stick to the top of the screen)</div>
    <div>main content (should scroll away)</div>
  </div>
</div>

Answer 1

如果我对你的问题的理解正确，你最好的办法是将你的侧面板 div 移出它的 parent div 然后将它的位置设置为固定并改变你的顶部, left 等样式。

最终重要的是您的侧窗格 div 没有任何 parent、grandparent 等位置不是静态的，因为fixed div 将希望相对于其最近的祖先定位，其位置不是静态的。最简单的方法仍然是将侧窗格 div 移到所有其他 div 之外，以便它直接 child 正文。

如何使孙子元素具有粘性？

How to make a grandchild element sticky?

css

sticky