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

Change "selected" on scroll in page

本文关键字：选择 已选择 滚动      更新时间：2023-09-26

我一直在尝试在我的导航栏上获取自动更新，但我无法让它工作。这是我的代码：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>

帮助将不胜感激！

格莱兹，

假设你使用的是jQuery，你将需要一个每次滚动时触发的函数。

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

知道视图中的元素后，使用 .selected 类清除任何当前活动的元素，然后选择要.selected的元素并添加.selected类。

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

下面是一个纯粹的JavaScript解决方案，我在这里找到的。这应该接近于即插即用的解决方案！

(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');
      }
    }
  };
})();
相关文章：