如何制作浮动导航栏？

Question

我在http://www.f7tek.tk获得了这个网站。该网站有一个白色菜单栏。

我想要的是，当我向下滚动页面时，此栏位于顶部：

我尝试将位置设置为已修复，并将 z-index 设置为 1000 。这几乎可以实现我想要的一切但是当我向下滚动时，栏杆会停留在那个位置，不会像我想要的那样移动到顶部。

是否可以仅使用 CSS ？那么 JavaScript 呢？如果是，那怎么样？

Answer 1

如果滚动到某一点，您要做的是在标题栏中添加一个类。

因此，如果您有一个名为<div class="sticky-header">Your header</div>的标题，并添加了一个名为fixed的第二个类，它将在从窗口顶部滚动到100px后应用，它将从那里停留。

JQUERY：

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
       $('.sticky-header').addClass('fixed');
    }
    else {
       $('.sticky-header').removeClass('fixed');
    }
});

CSS：

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; 
}

JSFIDDLE DEMO