Javascript 基于div id的多个jQuery函数

我有一个导航功能，它有两个部分，第一个功能不起作用，但第二个起作用

如果向下滚动，您将看到导航在滚动时淡入。。我想做的是让相同的链接显示出来，没有背景颜色，然后当你向下滚动链接时，随着网站向上滚动，同样的链接会随着黑色导航栏淡入

<div id="menu" style="display: block;">Top Bar</div>
<header id="header-active">
    <ul>
        <li>Nav links</li>
    </ul>
</header>
<div id="hero"></div>
<div style="height: 600px;">section 1</div>

---

你是说像这样的事吗？

基本上，我将

#header

的

CSS

和它的活动版本分开。您可以在动画中使用CSS（无论如何，这样做比JQuery更好）

CSS:

然后在JS中：

if ($(this).scrollTop() > 200) {
    $('#header').addClass('active');
} else {
    $('#header').removeClass('active');
}

如果你想让它匹配的话，这显然会把水族箱向下推，将

#header

的背景色设置为

background:aqua

，而不是

none

，就像我所做的那样：我还将

ul

内部

#header

中的

边距顶部

去掉，这样水族就会撞上红色

---

如果你想让它坐在水族箱的顶部，那么你需要将

#header

的位置设置为

绝对值

：

这正是我想要完成的。。唯一的问题是它看起来像是把绿色箱向下推。@Codi我编辑了它来解释并添加了两个js提琴的链接供你查看：）.非常感谢Maverick。。如果你使用

位置：绝对

变量，你必须进一步分割属性以获得淡出。这是因为从固定位置到绝对位置的切换不是动画，而是即时发生的。否则，只需确保将过渡设置为“开始”和“停止”在正确的高度，即可正常工作。

#header {
  width:100%; 
  height:75px; 
  color: #000;
  z-index:9999;
  background: none;
}

#header.active {
  position:fixed;
  top:0px;
  background:#000;
  color: #fff;
  transition: all ease-in-out 500ms;
}

if ($(this).scrollTop() > 200) {
    $('#header').addClass('active');
} else {
    $('#header').removeClass('active');
}