移动固定/粘性菜单 CSS

Question

希望创建一个从网页中间开始的固定菜单，但在使用 CSS/HTML 向下滚动时会修复到页面顶部。

是否可以使用容器来做到这一点？所以带有菜单的容器从顶部容器下方开始，当顶部容器滚动离开页面时，菜单固定在该容器的顶部和屏幕的顶部？

例如，如何使第二个容器中的图像在向下滚动页面时停留在屏幕顶部，但使其停留在第二个容器中：

https://codepen.io/Daggett/pen/mpBaab

    position: sticky;
    <!--doesn't stick!-->

有没有办法只使用 CSS 来做到这一点？我知道它可以用 jQuery 完成

谢谢！

Answer 1

position: sticky 需要一个明确的垂直位置，例如 top:0 才能知道要坚持的位置。