jquery - 使用jquery，找到视口(viewport)顶部为 "inside"的div类

Question

我有一个单页网站，如下所示:

<div class="splash-screen"> 
  <!--Content-->
</div>
<div class="about-us"> 
  <!--Content-->
</div>
<div class="contact-us"> 
  <!--Content-->
</div>

如何找出观看者当前所在的位置？返回查看器所在 div 名称的函数。

我尝试过使用 jquery waypoints ，但它的方法有点错误。当视口(viewport)进入 div 时，Waypoints 会触发一个函数。我想找到视口(viewport)以编程方式输入的 div，以便我可以相应地调整菜单 slider 。

Answer 1

您可以在窗口滚动上放置一个事件监听器。每次窗口滚动时，我们都可以检查主体的顶部是否位于每个部分的顶部下方(或每个部分顶部的 100 像素以内)。

HTML

<ul id="navigation">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

<div id="section1" class="pageSection">
    <h2>Section 1</h2>
</div>
<div id="section2" class="pageSection">
    <h2>Section 2</h2>
</div>
<div id="section3" class="pageSection">
    <h2>Section 3</h2>
</div>
<div id="section4" class="pageSection">
    <h2>Section 4</h2>
</div>

Javascript

$(window).scroll(function() {

    var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop());

    $('.pageSection').each(function (index) {
        if (windowTop > ($(this).position().top - 100))
        {
            $('#navigation a.current').removeClass('current');
            $('#navigation a:eq(' + index + ')').addClass('current');
        }
    });

}).scroll();

<强> Demo