檢測當前在視口中的元素

Question

我有一個帶有固定標題的頁面，我試圖根據當前的滾動點根據用戶的窗口來改變導航中的li元素。

我的印象是，如果我計算出當前位於視口頂部的元素，最好的方法是。如果我有4 + divs全部與類page-section，我如何找到當前在頁面頂部的一個id？

Answer 1

剛剛重新發現了我的這個問題。

我正在尋找waypoints js庫。

Answer 2

歡迎SO，

您可以getBoundingClientRect方法試試。它會給你視角的元素位置尊重。看下面的代碼的邏輯，它會給你一個線索，以實現自己的工作（最重要的部分是checkVisibleSection函數的第一個代碼）：

HTML代碼

<ul id="navigation"> 
    <li data-section="1"><a class="active" href="#">Section 1</a></li> 
    <li data-section="2"><a href="#">Section 2</a></li> 
    <li data-section="3"><a href="#">Section 3</a></li> 
    <li data-section="4"><a href="#">Section 4</a></li> 
    <li data-section="5"><a href="#">Section 5</a></li> 
</ul> 

<section id="section1" class="section" data-section="1"> 
    <header>Section 1</header> 
</section> 

<section id="section2" class="section" data-section="2"> 
    <header>Section 2</header> 
</section> 

<section id="section3" class="section" data-section="3"> 
    <header>Section 3</header> 
</section> 

<section id="section4" class="section" data-section="4"> 
    <header>Section 4</header> 
</section> 

<section id="section5" class="section" data-section="5"> 
    <header>Section 5</header> 
</section> 

JavaScript代碼

var nav   = document.getElementById("navigation"), 
    sections = document.querySelectorAll(".section"), 
    delay  = null; 

//---Scroll logic 
document.addEventListener("scroll", function(){ 

    if(!isNaN(delay)){ clearTimeout(delay); } 

    delay = setTimeout(checkVisibleSection, 100); 

}); 

//---Check the visible section 
function checkVisibleSection(){ 

    var minor = window.innerHeight, 
     section = null; 

    //---Select the section closest to the top 
    [].forEach.call(sections, function(item){ 

     var offset = item.getBoundingClientRect(); 

     if(Math.abs(offset.top) < minor){ 

      minor = Math.abs(offset.top); 

      section = item; 

     } 

    }); 

    //---If the section exists 
    if(section){ 

     var index = section.dataset.section, 
      link = nav.querySelector("li[data-section='" + index + "'] a"); 

     //---If the link is not already active 
     if(!link.classList.contains("active")){ 

      //---Remove the active class 
      nav.querySelector("a.active").classList.remove("active"); 

      //---Add the active class 
      link.classList.add("active"); 

     } 

    } 

} 

//---Click on buttons 
nav.addEventListener("click", function(evt){ 

    evt.preventDefault(); 

    var link = evt.target; 

    if(link.nodeName.toLowerCase() === "a"){ 

     var section = link.parentNode.dataset.section; 

     //---Remove the class of the active link 
     nav.querySelector("a.active").classList.remove("active"); 

     //---Active the link 
     link.classList.add("active"); 

     //---Scroll to the section 
     document.getElementById("section" + section).scrollIntoView(); 

     document.body.scrollTop -= 30; 

    } 

}); 

在這裏，你有一個動作示例的JSFiddle。