添加 javascript 后，我的导航栏在滚动时没有改变颜色答案

【问题标题】：My Navbar is not changing color on scroll after adding javascript添加 javascript 后，我的导航栏在滚动时没有改变颜色
【发布时间】：2020-07-17 12:00:37
【问题描述】：

我不熟悉 javascript，并从我正在观看的教程中复制了 javascript 部分。但是，它似乎不起作用，并且导航栏在滚动时没有改变颜色。我不确定 javascript 是否不工作、css 或者我是否应该将“滚动”添加到 Navbar 类。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){ $('nav').toggleClass('scrolled', $(this).scrollTop() > 1080);
}); 
</script>
<style>
  navbar.scrolled{
    background-color: darkgray !important;
  }
</style>
</head>
<body>
 
<header>
  <div class="container-fluid">
    <div class="navbar navbar-light navbar-expand-md fixed-top">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#uniqueIdentifier">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div id="uniqueIdentifier" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Skills</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content" style="height:200vh;"> 
  
  </div>
 </header>
 
</body>
</html>

【问题讨论】：

标签： javascript html css bootstrap-4 navbar

【解决方案1】：

在正文底部添加您的脚本标签，以便在 DOM 加载后注册您的事件侦听器。您也没有在 CSS/jquery 中定位正确的 DOM 元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
      div.navbar.scrolled {
        background-color: darkgray !important;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container-fluid">
        <div class="navbar navbar-light navbar-expand-md fixed-top">
          <a class="navbar-brand" href="#">Brand</a>
          <button
            class="navbar-toggler"
            data-toggle="collapse"
            data-target="#uniqueIdentifier"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="uniqueIdentifier" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content" style="height:200vh;"></div>
    </header>
    <script>
      $(window).scroll(function() {
        $("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 1080);
      });
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

脚本应该放在 body 标签的底部，以便在 dom 完成加载后运行。

【讨论】：