Question

我有一个带有固定标题的页面，我正在尝试获取导航中的li元素，以根据当前滚动点的用户窗口更改样式。

我的印象是，如果我找出当前位于视口顶部的元素，那么最好的方法就是这样做。如果我在课程divs中有4 + page-section，那么如何找到当前位于页面顶部的id？

Answer 1

欢迎来到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个实例。

Answer 2

刚刚重新发现了我的这个问题。

我一直在寻找waypoints js库。

检测当前在视口中的元素

2 个答案: