javascript - 当在网站的不同 div 上滚动时，使 Bootstrap4 导航栏改变颜色

标签 javascript html jquery css bootstrap-4

我正在使用 bootstrap4 在我的个人投资组合网站上工作，我有一个很好的想法，那就是改变我网站不同 div 上的导航栏颜色。我知道我们已经使用了 JQuery 的偏移和 scrollTop 函数，我试过了但是它不能正常工作。我想知道是否有人可以指出正确的方向如何解决这个问题。

这是网站代码:

<!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.2/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.2/js/bootstrap.min.js"></script>
</head>
<body>

<header id="change">
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Contact</a>
      </li>    
    </ul>
  </div>  
</nav>
</header>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


<script>

var top1 = $('#section1').offset().top;
var top2 = $('#section2').offset().top;
var top3 = $('#section3').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#change').css('background-color', '#f00');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('#change').css('background-color', '#0f0');
  } else if (scrollPos >= top3) {
    $('#change').css('background-color', '#00f');
  }
});

</script>

</body>
</html>

在此先感谢您的帮助。

最佳答案

背景颜色由导航栏中的“bg-dark”类设置。所以我会直接在导航栏上删除/添加背景颜色类。 例如，我创建了一些 bg-color 类并给导航栏一个 id。可能有更清洁的解决方案，但我只想在这里举个例子。

.bg-purple {
  background-color: purple;
}

.bg-cyan {
  background-color: cyan;
}

.bg-orange {
  background-color: orange;
}
<!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.2/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.2/js/bootstrap.min.js"></script>
</head>
<body>

<header id="change">
<nav id="navbar-change" class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Contact</a>
      </li>    
    </ul>
  </div>  
</nav>
</header>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


<script>

var top1 = $('#section1').offset().top;
var top2 = $('#section2').offset().top;
var top3 = $('#section3').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#navbar-change').removeClass('bg-dark');
    $('#navbar-change').removeClass('bg-cyan');
    $('#navbar-change').removeClass('bg-orange');
    $('#navbar-change').addClass('bg-purple');
  } else if (scrollPos >= top2 && scrollPos < top3) {
     $('#navbar-change').removeClass('bg-dark');
     $('#navbar-change').removeClass('bg-purple');
     $('#navbar-change').removeClass('bg-orange');
     $('#navbar-change').addClass('bg-cyan');
  } else if (scrollPos >= top3) {
     $('#navbar-change').removeClass('bg-dark');
     $('#navbar-change').removeClass('bg-purple');
     $('#navbar-change').removeClass('bg-cyan');
     $('#navbar-change').addClass('bg-orange');
  }
});

</script>

</body>
</html>

关于javascript - 当在网站的不同 div 上滚动时，使 Bootstrap4 导航栏改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65774504/

上一篇：javascript - 如何为轻量级图表设置自定义时区？

下一篇：perl - 如何从 perl 中的文本中提取引用的部分？

相关文章：

javascript - 如何在 UIWebview 中启用 JavaScript

javascript - 如何设置 Google 自定义搜索引擎的样式，使其不显示为 block 元素

html - 设置div的最小高度

jquery - 仅当特定元素出现在您要选择的元素之后时，如何使用 CSS 选择元素？

javascript - 搜索并用 jQuery 替换

javascript - Html5 和 CSS 无法生成结果？

javascript - 突出显示搜索文本 - angular 2

javascript - 如何为解构不存在的 key 抛出错误

HTML/CSS - 使用自定义字体

javascript - 需要使用 select 将按钮的 onClick 值更改为另一个值

©2024 IT工具网  联系我们