js中用于滑动导航栏的简单功能不起作用

Question

所以我得到了这个功能，当我向下滚动该站点时，它应该更改导航栏的背景颜色并使其固定，但是它不起作用。请告诉我，该函数是否存在问题，或者我在其他地方出错了？还尝试在html文件中添加功能，但仍然无法正常工作，并尝试了w3school的功能以使其正常工作。

$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('siteNav.scroll');
  } else {
    $('nav').removeClass('siteNav.scroll');
  }
})

#siteNav {
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.siteNav.scroll {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
}

#siteNav .logo {
  padding: 10px;
  transition: 0.3s;
  display: flex;
}

#siteNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#siteNav ul li {
  list-style: none;
  border-right: 1px solid #383838;
  padding-top: 20px;
}

#siteNav ul li a {
  padding: 0 30px;
  text-decoration: none;
  transition: 0.3s;
  color: #000000;
}

#siteNav ul li:last-child {
  border-right: none;
}

#siteNav.scroll ul li a {
  color: #000000;
}

#siteNav ul li a:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <nav id="siteNav">
    <img class="logo" src="images/img2-logo.png" alt="">
    <ul>
      <li><a href="#mission">MISSION</a></li>
      <li><a href="#clients">CLIENTS</a></li>
      <li><a href="#products">PRODUCTS</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>
  <!--header-->

  <header>
    <div>
      <h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
      </h1>
    </div>
  </header>
</div>

Answer 1

问题

CSS选择器.siteNav.scroll搜索具有类siteNav和scroll的元素，如下所示：

<nav class="siteNav scroll">

但是，您的.addClass("siteNav.scroll")实际上是在添加一个叫做siteNav.scroll的一个类，就像这样：

<nav class="siteNav.scroll">

解决方案

.addClass("siteNav scroll")

$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('siteNav scroll');
  } else {
    $('nav').removeClass('siteNav scroll');
  }
})

body { height: 5000px; }

#siteNav {
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.siteNav.scroll {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
}

#siteNav .logo {
  padding: 10px;
  transition: 0.3s;
  display: flex;
}

#siteNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#siteNav ul li {
  list-style: none;
  border-right: 1px solid #383838;
  padding-top: 20px;
}

#siteNav ul li a {
  padding: 0 30px;
  text-decoration: none;
  transition: 0.3s;
  color: #000000;
}

#siteNav ul li:last-child {
  border-right: none;
}

#siteNav.scroll ul li a {
  color: #000000;
}

#siteNav ul li a:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <nav id="siteNav">
    <img class="logo" src="images/img2-logo.png" alt="">
    <ul>
      <li><a href="#mission">MISSION</a></li>
      <li><a href="#clients">CLIENTS</a></li>
      <li><a href="#products">PRODUCTS</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>
  <!--header-->

  <header>
    <div>
      <h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
      </h1>
    </div>
  </header>
</div>

“更好”的解决方案

除非您将为此使用多种元素类型（siteNav之外），否则我认为您不需要<nav>类（正如Andy G指出的那样）。

相反，将其简化为.addClass("scroll") / .removeClass("scroll")，然后将CSS选择器更改为nav.scroll { ... }（或#siteNav.scroll { ... }）。

$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('scroll');
  } else {
    $('nav').removeClass('scroll');
  }
})

body { height: 5000px; }

#siteNav {
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav.scroll {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
}

#siteNav .logo {
  padding: 10px;
  transition: 0.3s;
  display: flex;
}

#siteNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#siteNav ul li {
  list-style: none;
  border-right: 1px solid #383838;
  padding-top: 20px;
}

#siteNav ul li a {
  padding: 0 30px;
  text-decoration: none;
  transition: 0.3s;
  color: #000000;
}

#siteNav ul li:last-child {
  border-right: none;
}

#siteNav.scroll ul li a {
  color: #000000;
}

#siteNav ul li a:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <nav id="siteNav">
    <img class="logo" src="images/img2-logo.png" alt="">
    <ul>
      <li><a href="#mission">MISSION</a></li>
      <li><a href="#clients">CLIENTS</a></li>
      <li><a href="#products">PRODUCTS</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>
  <!--header-->

  <header>
    <div>
      <h1>aaaaaaa <br><a>aaaaaa-aaaaaa</a></br>
      </h1>
    </div>
  </header>
</div>