css:触摸顶部时固定的 float 导航栏

Question

我正在寻找实现这一目标的方法:

正常情况下放置在页面中的导航栏，当它在我滚动时触及顶部时，它会固定在那里。

你可以换一种方式理解它:它就像一个固定的导航栏，一开始并没有放在顶部。

类似于this question这个人在使用 js，但我想要一个更简单的解决方案。

我正在使用 Bootstrap ，是否可以使用纯 css 来执行此操作？

Answer 1

如果您使用 Bootstrap ，为什么不只使用 "Affix"内置组件？

不过，为了更正确地回答您的问题，不，没有办法单独使用 CSS 来完成此操作。原因是 CSS 无法监控滚动位置。使用 javascript 就像添加一个监听器以滚动窗口位置一样简单，并在达到“x”像素时切换具有固定位置的类。