css - 如何制作固定位置的菜单栏？

Question

我想设计我的菜单栏的样式 Like THIS . 当您向下滚动时，它会固定在网站的顶部，而在加载页面时它不会固定在该位置。

如何用 CSS 实现？

Answer 1

您想要的是“粘性导航栏/菜单”。

最简单的方法是将下面的 CSS 添加到您的菜单/导航栏

position:fixed;
top:0px;

也就是说，要获得更接近您发布的效果，您可能需要考虑使用一些 jQuery，例如:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

这样做是通过将 CSS 类“fixed”添加到 .menu 元素，在您滚动到某个点(例如 50px)后将菜单栏“修复”到页面顶部，固定类将只是例如上面的 CSS。

列出了一些很好的例子 here .