Question

我是Bootstrap框架的新手，在滚动不同部分时，我想更改导航栏的颜色。当该部分的背景颜色为白色时，导航栏的背景颜色应更改为红色，但是我的JavaScript无法正常工作...

能帮我吗？我无法找到解决问题的方法。这是我的https://stackoverflow.com/a/20057857/9007125

$(document).ready(function() {
  var scroll_start = 0;
  var startchange = $('#part1');
  var offset = startchange.offset();
  $(document).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > offset.top) {
      $('.navbar-fixed-left').css('background-color', '#f9476c !important;');
    } else {
      $('.navbar-fixed-left').css('background-color', 'rgba(255,255,255,0.6)');
    }
  });
});

#part1 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part2 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#part3 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part4 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#spy {
  position: fixed;
  z-index: 5;
  height: 100vh;
}

.op {
  background-color: rgba(255, 255, 255, 0.6);
}

.op :hover {
  background-color: rgba(255, 255, 255, 1);
}

.navbar-fixed-left .nav-link {
  color: black;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div class="d-flex align-items-xl-center" id="spy">
    <nav class="navbar navbar-fixed-left">
      <ul class="navbar-nav">
        <li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
        <li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
      </ul>
    </nav>
  </div>
  <section id="part1">
  </section>
  <section id="part2">
  </section>
  <section id="part3">
  </section>
  <section id="part4">
  </section>
</body>

</html>

Answer 1

您的JavaScript代码原样看起来很复杂，如果添加了一点CSS，则可以简化为toggleClass（）。首先添加一个带有navbar-nav背景颜色的类（我将代码设置为红色，因为家庭背景为白色），还添加了一个带有替代bg颜色的附加类。

我建议在jquery中将您的变量定义为jquery变量（在它们前面带有美元符号）-了解更多in this other SO question

我在部分中添加了一些文字，以便您获得点击效果。

希望这会有所帮助

$(document).ready(function() {
  var scroll_start = 0;
  var $startchange = $('#part1');
  var $offset = $startchange.scrollTop();
  $(document).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > $offset) {
      $('.navbar-nav').toggleClass('altcolor');
    }
  });
});

#part1 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part2 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#part3 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part4 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#spy {
  position: fixed;
  z-index: 5;
  height: 100vh;
}

.op {
  background-color: rgba(255, 255, 255, 0.6);
}

.op :hover {
  background-color: rgba(255, 255, 255, 1);
}

.navbar-nav {
  list-style-type: none;
  padding-left: 20px;
  background-color: #f9476c;
}

.navbar-nav.altcolor {
  background-color: rgba(255, 255, 255, 0.6);
}

.navbar-fixed-left .nav-link {
  color: black;
  text-decoration: none;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>

<body>
  <div class="d-flex align-items-xl-center" id="spy">
    <nav class="navbar navbar-fixed-left">
      <ul class="navbar-nav">
        <li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
        <li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
      </ul>
    </nav>
  </div>
  <section id="part1">

  </section>
  <section id="part2">
    <p>
      About
    </p>
  </section>
  <section id="part3">
    <p>
      Price
    </p>
  </section>
  <section id="part4">
    <h2>
      Contact
    </h2>
  </section>
</body>

</html>

如何在bootstrap4的滚动中更改垂直导航栏的颜色？

1 个答案: