Javascript 如何创建粘性导航条？

当我向下滚动页面时，我试图使导航条粘在页面顶部。我已经包括了一个JS提琴：我完全遵循了一个w3schools示例，但它不起作用。请帮忙

在我的研究中，我注意到offsetTop和offset（）之间的区别。我觉得这个问题与我的css中的某些东西有关

我还注意到，在javascript中应用offsetTop时，导航栏中的链接不起作用。尽管控制台中没有显示错误。但是，当我实现offset（）.top时，控制台中会显示一个错误…但是导航栏链接可以工作

HTML

JS

---

您没有包括jquery，css有点不合适

请参见此处的工作示例：

我包括jquery并将以下内容更新为css：

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color:red !important;
}

.sticky + .container {
    padding-top: 10px;
}

---

您没有包括jquery，css有点不合适

请参见此处的工作示例：

我包括jquery并将以下内容更新为css：

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color:red !important;
}

.sticky + .container {
    padding-top: 10px;
}

---

您可以将纯css用于。要定义距离顶部多远的值变为粘性，请修改

top

属性

nav {
  position: sticky;
  top: 0;
}

例1

正文{
填充：0；
保证金：0；
}
导航{
位置：粘性；
排名：0；
}
导航>ul{
保证金：0；
列表样式类型：无；
填充：0；
显示器：flex；
弯曲方向：行；
背景：红色
}
导航>ul>li{
填充：10px；
}

项目
项目
项目

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

您可以将纯css用于。要定义距离顶部多远的值变为粘性，请修改

top

属性

nav {
  position: sticky;
  top: 0;
}

例1

正文{
填充：0；
保证金：0；
}
导航{
位置：粘性；
排名：0；
}
导航>ul{
保证金：0；
列表样式类型：无；
填充：0；
显示器：flex；
弯曲方向：行；
背景：红色
}
导航>ul>li{
填充：10px；
}

项目
项目
项目

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

如果您只想将其设置为

位置，则其可能重复：粘性只需从一开始就这样做。如果您只希望它是
位置，则可能重复：粘性从一开始就这样做。
nav {
  position: sticky;
  top: 0;
}