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。

的函数

从那里，您需要检测视图中的哪些元素。

一旦您知道哪些元素在视图中，请使用.selected类清除所有当前活动的元素，然后选择您想要哪个元素.selected并添加.selected类。< / p>

编辑以获取更多详细信息：

下面是一个纯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');
      }
    }
  };
})();

在页面中滚动更改“已选择”

1 个答案: