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

时间:2019-03-13 14:01:44

标签: javascript jquery html css

所以我得到了这个功能,当我向下滚动该站点时,它应该更改导航栏的背景颜色并使其固定,但是它不起作用。请告诉我,该函数是否存在问题,或者我在其他地方出错了?还尝试在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>

1 个答案:

答案 0 :(得分:1)

问题

CSS选择器.siteNav.scroll搜索具有类siteNavscroll的元素,如下所示:

<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>