現在ビューポートにある要素を検出します

Question

固定ヘッダーのページがあり、現在のスクロールポイントに基づいてユーザーのウィンドウに基づいてスタイルを変更するために、ナビゲーション内にli要素を取得しようとしています。

私は、現在どの要素がビューポートの最上部にあるかを調べた場合、これを行う最善の方法があるという印象を受けています。 divsがすべてpage-sectionの4つ以上ある場合は、現在ページの上部にある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を持っています。