如何修复定位菜单栏？

Question

我想我的风格菜单栏像这样.当您向下滚动时,它固定在站点的顶部,并且在页面加载时它不固定.

如何用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类"固定"添加到.menu元素,一旦滚动经过某个点(例如50px),将菜单栏"修复"到页面顶部,固定类将仅仅是例如上面的CSS.

这里列出了一些不错的例子.