Question

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

我知道data-spy属性做了什么以及如何使用它，但我不知道如何在bonnet下使用scrollspy插件。因此我可以创建自己的代码来处理它。

<!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事件。每当scrolllspy移动到新部分时，此事件都会触发。如果您在data-spy="scroll"元素上滚动，则会在window或body的元素上发生这种情况。

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

完成后，您可以抓取href的{{1}}，将其转换为类，然后将其应用到导航栏。您还需要删除此事件先前已应用的任何类。

这使您可以在导航栏上为每个部分设置特定的类，仅在该部分处于活动状态时动态应用。其余的是用CSS完成的。

CSS将关闭动态类并将背景应用于活动的<a>元素。对于你必须覆盖的所有类，Bootstrap在这里有点烦人。为简单起见，我使用id：

来解决这个问题

#navbar.bg-section2 .active a { background-color: #28a745; }是动态应用的类。

这就是所需要的一切。以下是一个实例。点击“整页”可以更好地查看。

bg-section2

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;
}

更改scrollspy的活动导航栏颜色

1 个答案: