Javascript 是什么让我的导航条在滚动时粘在上面？

我想知道是什么让我的导航条在滚动时粘在顶部，因为我只有基本的html和css代码？上一次，没有javascript我无法做到这一点。提前谢谢

以下是JSFIDLE链接：

正文{
背景色：黑色；
}
#海德尔{
背景颜色：蓝色；
颜色：浅绿色；
}
#包裹{
z指数：1；
保证金：0；
填充：0；
位置：固定；
左：0；
排名：0；
宽度：100%；
}
#导航包{
高度：30px；
不透明度：0.7；
过滤器：α（不透明度=80）；
}
#导航{
高度：95px；
填充物：5px；
背景：#999；
}
#导航ul{
保证金：0；
填充：0；
}
#李海军{
浮动：左；
填充：3px8px；
背景色：灰色不透明度：0.5；
保证金：0；
颜色：#f00；
列表样式类型：无；
}
#李娜{
颜色：黑色；
文字装饰：无；
利润率：10像素；
-webkit转换：0.2s 0.2s；
}
#导航李a：悬停{
颜色：红色；
}
克利尔左{
清除：：左；
}
#位置{
位置：绝对位置；
顶部：70像素；
左：10pX；
}
.形象{
宽度：1000px；
高度：725px；
不透明度：0.3；
过滤器：α（不透明度=30）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：ass 1s易用性；
过渡：ass 1容易；
}
.图片：悬停{
宽度：1100px；
高度：800px；
不透明度：0.9；
过滤器：α（不透明度=100）；
}
.imageframe{
边框：3px实心#fff；
宽度：1000px；
高度：725px；
边际：0px；
溢出：隐藏；
-webkit盒阴影：5px 5px 5px 5px#111；
盒影：5px 5px 5px#111；
}
#位置图像{
位置：绝对位置；
顶部：108px；
左：2；
}
#div{
宽度：580；
身高：678；
溢出：滚动；
边框：1px纯白；
填充：25；
利润率：25px；
位置：绝对位置；
右：100px；
顶部：84px；
左：988px；
}
p{
颜色：白色；
}
#h1{
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
排名：837；
}
p{
宽度：700px；
颜色：aliceblue；
填充：20px；
利润率：10px；
位置：绝对位置；
顶部：1100px；
}
#h11{
颜色：白色；
位置：相对位置；
排名：1070；
利润率：10px；
}

就像@Sreenath已经说过的那样：你使用“位置：固定”作为你的包裹

尝试使用以下方法：

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top:0;
  width: 100%;
}

---

除非你想要其他行为，否则你必须清楚地提到你想要实现的目标。

就像@Sreenath已经说过的：你使用“位置：固定”作为你的“包裹”

尝试使用以下方法：

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top:0;
  width: 100%;
}

---

除非您想要其他行为，否则您必须清楚地说明您想要实现的目标。

您的

nav

栏粘在顶部，因为

位置：固定的
在
#wrap
中定义

position:fixed
将元素及其子元素固定到指定位置

了解更多关于HTML定位的信息


（检查播放››）

正文{
背景色：黑色；
}
#海德尔{
背景颜色：蓝色；
颜色：浅绿色；
}
#包裹{
z指数：1；
保证金：0；
填充：0；
/*在“position:fixed；”行下方添加注释，以获取默认行为*/
位置：固定；
左：0；
排名：0；
宽度：100%；
}
#导航包{
高度：30px；
不透明度：0.7；
过滤器：α（不透明度=80）；
}
#导航{
高度：95px；
填充物：5px；
背景：#999；
}
#导航ul{
保证金：0；
填充：0；
}
#李海军{
浮动：左；
填充：3px8px；
背景色：灰色不透明度：0.5；
保证金：0；
颜色：#f00；
列表样式类型：无；
}
#李娜{
颜色：黑色；
文字装饰：无；
利润率：10像素；
-webkit转换：0.2s 0.2s；
}
#导航李a：悬停{
颜色：红色；
}
克利尔左{
清除：：左；
}
#位置{
位置：绝对位置；
顶部：70像素；
左：10pX；
}
.形象{
宽度：1000px；
高度：725px；
不透明度：0.3；
过滤器：α（不透明度=30）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：ass 1s易用性；
过渡：ass 1容易；
}
.图片：悬停{
宽度：1100px；
高度：800px；
不透明度：0.9；
过滤器：α（不透明度=100）；
}
.imageframe{
边框：3px实心#fff；
宽度：1000px；
高度：725px；
边际：0px；
溢出：隐藏；
-webkit盒阴影：5px 5px 5px 5px#111；
盒影：5px 5px 5px#111；
}
#位置图像{
位置：绝对位置；
顶部：108px；
左：2；
}
#div{
宽度：580；
身高：678；
溢出：滚动；
边框：1px纯白；
填充：25；
利润率：25px；
位置：绝对位置；
右：100px；
顶部：84px；
左：988px；
}
p{
颜色：白色；
}
#h1{
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
排名：837；
}
p{
宽度：700px；
颜色：aliceblue；
填充：20px；
利润率：10px；
位置：绝对位置；
顶部：1100px；
}
#h11{
颜色：白色；
位置：相对位置；
排名：1070；
利润率：10px；
}