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

标签 html css css-position

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

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

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

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

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

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

谢谢!

最佳答案

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

关于html - 移动固定/粘性菜单 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48116115/

相关文章:

html - 设计 bootstrap 3 页面布局动态维护高度、滚动、宽度

html - 能够在 html/css 中移动 div 容器的淡入淡出图像

html - CSS 框阴影不适用于 Chrome

html - 如果没有指定宽度,填充从哪里继承长度

javascript - 使用 JavaScript 回到 CSS 位置粘性元素?

html - 调整浏览器大小时如何使字体变小

css - 我网页上的页脚类

jquery - 如何确定元素是否位于固定位置的容器中?

html - 列放置问题内的 Bootstrap 列

html - 在固定宽度的 div 中垂直居中无序列表和按钮