更改 scrollspy 的活动导航栏颜色

Question

我正在使用 Bootstrap scrollspy 来更新导航栏。我想更改 navbar 上突出显示的活动 li 的颜色以匹配匹配 section.but 的 background-color 它是 动态内容

我知道 data-spy 属性的作用以及如何使用它，但我不知道 scrollspy 插件在 bonnet.so 下是如何工作的，我可以编写自己的代码来处理它。

<!DOCTYPE html>
<html>
<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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
  #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
  #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#section41">Section 4-1</a></li>
              <li><a href="#section42">Section 4-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="section1" class="container-fluid">
  <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">
  <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">
  <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>
<div id="section41" class="container-fluid">
  <h1>Section 4 Submenu 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="section42" class="container-fluid">
  <h1>Section 4 Submenu 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>

</body>
</html>

以上是 scrollspy 的例子。 Scrollspy 插件用于根据滚动位置自动更新导航列表中的链接。需要将活动导航栏的颜色更改为相应位置的背景颜色 This is an example of what I am starting with.

Answer 1

如果您想要更改活动（突出显示）导航栏项目的背景以匹配当前部分的背景，我会这样做：

首先，监听activate.bs.scrollspy事件。只要 scrollspy 移动到新部分，就会触发此事件。如果您在 body 元素上进行滚动监视，则会在带有 data-spy="scroll" 或 window 的元素上发生这种情况。

在该事件处理程序中，查找 .active 以确定哪个部分处于活动状态。您正在寻找的是 <a> 元素。下拉菜单是棘手的部分，因为可以有多个 .active 元素。你需要最后一个。您到达那里的方式取决于标记。对于您链接到的示例，$('.active').last().children().first() 会起作用。

完成后，您可以抓取 <a> 的 href，将其变成 class，并将其应用于导航栏。您还需要删除此事件之前应用的所有 classes。

这会让您在每个部分的导航栏上拥有特定的 classes，仅当该部分处于活动状态时才动态应用。剩下的用 CSS.

完成

CSS 将关闭动态 class 并将背景应用于活动 a 元素。 Bootstrap 在这里有点烦人，因为您必须覆盖所有 classes。为简单起见，我使用 id:

绕过它

#navbar.bg-section2 .active a  {
  background-color: #28a745;
}

bg-section2是动态应用的class。

仅此而已。下面是一个活生生的例子。点击"Full page"查看效果更佳。

var $navbar = $('#navbar');
var currentClass = 'bg-section1';

$(window).on('activate.bs.scrollspy', function() {
  var $active = $('.active');
  var $link = $active.last().children().last();

  // Classes have the form "bg-id" (with no # in the id)
  var newClass = 'bg-' + $link.attr('href').slice(1);

  $navbar.removeClass(currentClass);
  $navbar.addClass(newClass);

  // Keep track of which class is active
  currentClass = newClass;
});

body {
  position: relative;
  padding-top: 50px;
}

section {
  padding: 2rem;
  color: #fff;
  min-height: 70vh;
}

#section1,
#navbar.bg-section1 .active>a {
  background-color: #007bff;
}

#section2,
#navbar.bg-section2 .active>a {
  background-color: #28a745;
}

#section3_1,
#navbar.bg-section3_1 .active>a {
  background-color: #ffc107;
}

#section3_2,
#navbar.bg-section3_2 .active>a {
  background-color: #17a2b8;
}

#section3_3,
#navbar.bg-section3_3 .active>a {
  background-color: #dc3545;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="50">
  <nav class="navbar navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse bg-section1">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Section 3</a>
            <ul class="dropdown-menu">
              <li><a href="#section3_1">Section 3.1</a></li>
              <li><a href="#section3_2">Section 3.2</a></li>
              <li><a href="#section3_3">Section 3.3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <section id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
  </section>
  <section id="section2">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
  </section>
  <section id="section3_1">
    <h2>Section 3.1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
  </section>
  <section id="section3_2">
    <h2>Section 3.2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
  </section>
  <section id="section3_3">
    <h2>Section 3.3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
  </section>
</body>

更改 scrollspy 的活动导航栏颜色

Change active navbar color for scrollspy

scrollspy

twitter-bootstrap-3