html - 移动固定/粘性菜单 CSS

Question

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

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

例如，如何让第二个容器中的图片在页面向下滚动时停留在屏幕顶部，而让它停留在第二个容器中:

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

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

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

谢谢!

Answer 1

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