如何创建粘性导航栏css和javascript

我试图用CSS和JavaScript在滚动条上创建一个粘性导航条，但它显示为一个普通导航条，滚动时不会粘住。当它滚动时，我如何使它粘住？我在代码中添加了标题

window.onscroll=function（）{
myFunction（）
};
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

#导航栏{
溢出：隐藏；
背景色：#333；
}
/*导航栏链接*/
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

S I U
f u T u r e&B e y o n d

快到了！您需要将

.sticky

类应用于导航，使其粘滞

window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

正文{
高度：10000px；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
/*导航栏链接*/
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

向下滚动
向下滚动以查看粘性效果

快到了！您需要将

.sticky

类应用于导航，使其粘滞

window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

正文{
高度：10000px；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
/*导航栏链接*/
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

向下滚动
向下滚动以查看粘性效果

您没有应用

.sticky

类

。将它添加到导航栏（我添加了一堆div以强制滚动）

#导航栏{
溢出：隐藏；
背景色：#333；
}
/*导航栏链接*/
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
测试以引起一些漫步

您没有应用

.sticky

类

。将它添加到导航栏（我添加了一堆div以强制滚动）

#导航栏{
溢出：隐藏；
背景色：#333；
}
/*导航栏链接*/
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
试着去散散步
测试以引起一些闲逛

，如您所述，您是否尝试了一些JavaScript？您的CSS中有

.sticky

作为选择器，但HTML中没有该类。可能重复了Hmm，您希望实现的具体目标有点不清楚。你能提供一些具体的细节吗？也许这只是在你的导航上面插入一些内容的问题？或者您可能没有正确设置文档？很难说！正如您所提到的，您是否尝试了一些JavaScript？您的CSS中有

.sticky

作为选择器，但HTML中没有该类。可能与Hmm重复，您希望实现的具体目标有点不清楚。你能提供一些具体的细节吗？也许这只是在你的导航上面插入一些内容的问题？或者您可能没有正确设置文档？很难说！它起作用了，但现在它粘在页面顶部，而不是滚动。@Josephizz如果是这样，完整的代码在这里：在这种情况下，您不在中应用

sticky

类是正确的