javascript - 使用 jQuery 添加基于浏览器滚动位置的 CSS 类 - 寻找更模块化的方法

Question

关于我目前的 site (uptrde.com) 我将其设置为当您滚动到页面的某个部分时，与该部分对应的导航 a 会亮起。然而，我觉得我用 jQuery 做这件事的方式很困难，而且根本不是模块化的。我用于动画页面滚动的代码工作正常，只是最后一点给我带来了麻烦。我想让这段代码更加模块化，这样如果我将来向站点添加更多部分，我就不必找出新的值。感谢您的帮助。

$(window).scroll(function() {    
  $(".mainNav a").removeClass("selected");
     var scroll = $(window).scrollTop();
     //add the 'selected' class to the correct id element based on the scroll amount
     if (scroll >= 0 && scroll <= 855) { 
       $("#homeNav").addClass("selected"); 
         } else if (scroll >= 855 && scroll <= 1808) {
             $("#aboutNav").addClass("selected");
               } else if (scroll >= 1808 && scroll <= 2700) {
                 $("#sampleNav").addClass("selected");
                   } else if (scroll >= 2700 && scroll <= 3780){
                     $("#clientsNav").addClass("selected");
                       } else {
                         $("#contactNav").addClass("selected");
                       }
});

<nav id="menu">
  <ul class="mainNav">
    <li><a href="#top" id="homeNav" class="selected">Home</a></li>
    <li><a href="#about-header" id="aboutNav">About Us</a></li>
    <li><a href="#samples-header" id="sampleNav">Samples</a></li>
    <li><a href="#clients-header" id="clientsNav">Clients</a></li>
    <li><a href="#contact-header" id="contactNav">Contact</a></li>
   </ul>
</nav>

Answer 1

这是我的推荐。遍历页面上的每个部分并获取呈现的高度。将这些高度中的每一个添加到一个数组中，然后在添加类时循环遍历该数组。像这样:

$(window).scroll(function(){
     var scroll = $(window).scrollTop();
     var section_height = new Array();
     var section_position = new Array();
    $('.main-container').children().each(function(){
        section_height.push($(this).height());
        section_position.push($(this).offset().top);
    });

    for(i=0; i<section_position.length; i++){
        if($(window).scrollTop() > section_position[i] - (section_height[i] / 4)){
            $('.mainNav li').not(':nth-child('+i+')').find('a').removeClass('selected');
            $('.mainNav li:nth-child('+i+') a').addClass('selected');
        } else {
            $('.mainNav li:nth-child('+i+') a').removeClass('selected');
        }
    }
});

我还没有在您的网站上测试过这个，但今天早些时候我在另一个网站上使用了相同的代码，而且效果非常好。您将想要尝试在 for 循环中的 if 语句中使用的计算。我将它设置为在距离它大约 1/4 高度时切换到下一部分。换句话说，我希望它在您“几乎”处于滚动位置时更改为下一个导航元素。在更改突出显示的导航元素之前，我不想等到它一直位于屏幕顶部。但是，您可以选择不同的方式。