移动固定/粘性菜单CSS

Question

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

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

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

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

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

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

谢谢！

Answer 1

position: sticky需要一个明确的垂直位置，例如top:0，以了解要坚持的位置。