javascript - 在页面滚动时更改 "selected"

Question

我一直在尝试让我的导航栏自动更新，但我无法让它工作。 这是我的代码:http://pastebin.com/YTHaBD0i

<div id="header">
  <ul class="nav-list">
    <li class="download selected"><a href="#firstPage">Download</a></li>
    <li class="features"><a href="#secondPage">Features</a></li>
    <li class="method"><a href="#3rdPage">Method</a></li>
    <li class="purchase"><a href="#4thPage">Purchase</a></li>
  </ul>
</div>
<div id="footer">yey productions &copy; 2016</div>

<div id="fullpage">
  <div class="section " id="section0">
    <div class="intro">
      <h1>Download</h1>
      <p>Lorem Ipsum</p>
    </div>
  </div>
  <div class="section" id="section1">
    <div class="slide" id="slide1">
      <div class="intro">
        <h1>Features</h1>
        <p>Cheese.</p>
      </div>
    </div>
    <div class="slide" id="slide2">
      <h1>Cheese2</h1>
    </div>

  </div>
  <div class="section" id="section2">
    <div class="intro">
      <h1>Yey</h1>
    </div>
  </div>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Yey2</h1>
    </div>
  </div>
</div>

帮助将不胜感激!

你好，

Answer 1

假设您正在使用 jQuery，您将需要一个函数 fires every time you scroll .

从那里，您需要检测哪些元素在 View 中。

一旦您知道哪些元素在 View 中，请使用 .selected 类清除所有当前事件的元素，然后选择您想要的元素 .selected 并添加.selected 类。

编辑更多细节:

下面是我找到的纯JavaScript方案here .这应该接近于直接解决方案!:

(function() {
  'use strict';

  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
  });

  window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    for (i in sections) {
      if (sections[i] <= scrollPosition) {
        document.querySelector('.selected').setAttribute('class', ' ');
        document.querySelector('a[href*=' + i + ']').setAttribute('class', 'selected');
      }
    }
  };
})();