jquery - 将 jQuery 类更改绑定(bind)到点击视口(viewport)顶部的 div ID？

Question

我是一个完全的新手，我试图了解一个干净的 jQuery 解决方案，用于将 li 类更改绑定(bind)到触及视口(viewport)顶部的 SECTION id。我意识到这不是一个革命性的概念(它经常被使用)，但我首先进行了搜索，我看到的大多数解决方案都将类更改绑定(bind)到滚动的像素数。如果我只是做了糟糕的工作搜索，我深表歉意。

我认为这不重要，但我有一个固定位置的链接栏，它的可见性与滚动到 200 像素以下有关。

我现在如何设置它的简化版本:

HTML:

 <ul id="main-links">
    <li class="active"><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
 </ul>

<section id="1">
</section> 

<section id="2">
</section>

<section id="3">
</section>

CSS:

.main-links {
   display:none;
   position:fixed;
   bottom:0;
   width:90%;
   margin-left:7.5%;    
   }    

.main-links li{
        float:left;
        padding:0 .10em 2em .10em; 
        font-size:.75em; 
        font-weight:700;            
        }

.active {
   border-bottom:3px #000 solid;
   }

JS:

$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
    $(".main-links").fadeIn();

} else {
    $(".main-links").fadeOut();

    }
});

显然，我要做的是从第 1 节中删除“.current”，并在第 2 节到达视口(viewport)顶部后将其添加到第 2 节。感谢大家的帮助!

这里有一个稍微改变的 jsfiddle，虽然我还没有做任何关于绑定(bind)类更改的工作......

JSFiddle link

Answer 1

像这样的事情应该做你想做的

$(window).on('scroll', function () {
    var top = $(this).scrollTop(),
        idx = $('section').sort(function (a, b) {
                return top - $(b).offset().top;
              }).first().index('section'),
        el  = $('#main-links li').eq(idx);

    if (!el.hasClass('active')) {
        $('#main-links li').removeClass('active');
        el.addClass('active');
    }
});

它获取距顶部的滚动距离，然后根据它们距顶部相对于滚动位置的位置对 section 元素进行排序，因此集合中的第一个元素最接近顶部/可见等
然后它获取该元素的索引，并使用该索引获取具有相同索引的菜单项，并将类设置为该菜单项，同时从其他菜单项中删除该类。

FIDDLE