开发者问题收集

添加 javascript 后，我​​的导航栏在滚动时不会改变颜色

2020-07-17
46
javascript html css bootstrap-4 navbar

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

<!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>
2个回答

在正文底部添加脚本标记，以便在 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>
Robert Cooper
2020-07-17

脚本应该放在 body 标签的底部，以便它在 dom 加载完成后能够正常工作。

Kishan Sharma
2020-07-17