在頁面上滾動更改「選擇」

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類之一。

編輯爲更詳細地：

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