Javascript 如何制作浮动导航条？

我在上找到了这个网站。该网站有一个白色菜单栏

我想要的是，当我向下滚动页面时，此条会粘在顶部：

我尝试将位置设置为fixed，并将z索引设置为1000。这几乎是我想要的一切，但当我向下滚动时，该条保持在该位置，不会像我想要的那样移动到顶部

---

是否可以只使用CSS？那JavaScript呢？如果是，那么如何操作？

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

因此，如果您有一个名为

Your header

的标题，并添加第二个名为

fixed

的类，在从窗口顶部滚动到100px后将应用该类，它将从那里粘贴

JQUERY：

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

CSS:

---

您可以使用jquery进行此操作。因此，当屏幕顶部穿过某个点时，条会粘在窗口顶部。请看：使用on scroll事件检查文档是否比导航栏所在位置滚动得更远，然后将位置设置为fixed。@Keesonnema:我该怎么做？你能解释一下细节吗。您提到的网站正按照我的要求使用他们的网站。我将提供一个简单的示例，仅需1秒。^已经超过1秒，仍然没有示例：我很抱歉开玩笑有人编辑了这篇文章让它更有意义。谢谢大家

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