導航有一個活躍的班級工作

Question

大家好，我讓我的導航欄在一頁導航上工作。 但是我想要它，以便當用戶向下滾動頁面手冊時，導航類更改為應該處於活動狀態的類別，因此當他們經過該部分時，導航欄將突出顯示活動部分。

當他們點擊它時我可以讓它工作，但不能手動滾動

小提琴

HTML：

  <nav class="navbar navbar-default" data-spy="affix" data-offset-top="10">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#a">a</a></li>
          <li><a href="#b">b</a></li>
          <li><a href="#c">c</a></li>
          <li><a href="#d">d</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

CSS：

affix {
  top: 0;
  width: 100%
}


.affix + .section {
  margin-top: 68px;
}

.navbar {
  margin-bottom: 0px;
  left: 0;
  top: 0;
  width: 100%;
  list-style: none;
  height: 70px;
  z-index: 1
}

.navbar-nav {
  float: none;
  margin: 0;
  text-align: center
}

.navbar-nav>li {
  float: none;
  display: inline-block
}

.navbar-nav>li>a {
  line-height: 38px
}

.navbar-nav>li>a.active {
  background-color: #E7E7E7
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
  color: #333333;
  background-color: #E7E7E7
}

.navbar-toggle {
  background-color: #000000;
  background-image: none;
  border-radius: 4px;
  float: right;
  margin-bottom: 8px;
  margin-right: 15px;
  margin-top: 18px;
  padding: 9px 10px;
  position: relative
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #2DCC70
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #000000
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: transparent
}

#a{
  height: 700px; 
  background-color: Red;
}

#b{
  height: 700px; 
  background-color: blue;
}

#c{
  height: 700px; 
  background-color: yellow;
}

#d{
  height: 700px; 
  background-color: black;
}

JS：

$(function() {
    $('ul.nav a').bind('click',function(event){
    event.preventDefault();

        var $anchor = $(this);

    //Update active link
    $('ul.nav a').removeClass('active');
    $anchor.addClass('active');

    //Animate scroll position
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
    });
});

Answer 1

你可以用scrollspy做到這一點。 稱為Waypoints的 Javascript 庫是另一種可能性。

以下是如何使用航點的示例：

function makeNavActive($elem) {
  if (typeof $elem !== "jQuery") {
    $elem = $($elem);
  }
  $('ul.nav a').removeClass('active');
  $elem.addClass('active');
}

function waypointHandler() {
  var elementID = this.element.id;
  makeNavActive("[href='#" + elementID + "']");
}

var waypointA = new Waypoint({
  element: document.getElementById('a'),
  handler: waypointHandler,
  offset: 38
});

var waypointB = new Waypoint({
  element: document.getElementById('b'),
  handler: waypointHandler,
  offset: 38
});

var waypointC = new Waypoint({
  element: document.getElementById('c'),
  handler: waypointHandler,
  offset: 38
});

var waypointAD = new Waypoint({
  element: document.getElementById('d'),
  handler: waypointHandler,
  offset: 38
});

小提琴

我相信你可以創建一種更好的方式來設置航點，但這將作為一個例子。

有點好玩，我還創建了一種在 vanilla JS 中執行此操作的方法。 所以這是一個很好的輕量級香草實現，雖然不如使用航點靈活：

function makeNavActive($elem) {
      if (typeof $elem !== "jQuery") {
        $elem = $($elem);
      }
      $('ul.nav a').removeClass('active');
      $elem.addClass('active');
}

function handleScroll(){
        var scrollLevel = Math.floor(window.pageYOffset / 700);
        console.log(scrollLevel);
    if(scrollLevel === 0) {makeNavActive("[href='#a']")}
    else if(scrollLevel === 1) {makeNavActive("[href='#b']")}
    else if(scrollLevel === 2) {makeNavActive("[href='#c']")}
    else if(scrollLevel === 3) {makeNavActive("[href='#d']")}
}
window.onscroll=handleScroll

小提琴

希望有幫助！ 祝你的項目好運。