移动固定/粘性菜单 CSS

Question

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

是否可以使用容器执行此操作？因此，带有菜单的容器从顶部容器下方开始，当顶部容器滚动到页面外时，菜单固定在该容器的顶部和屏幕顶部？

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

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

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

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

谢谢！

Answer 1

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