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

在我目前的网站（uprde.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>

$（窗口）。滚动（函数（）{
$（“.mainNav a”）.removeClass（“选定”）；
var scroll=$（窗口）.scrollTop（）；
//根据滚动量将“selected”类添加到正确的id元素中
如果（scroll>=0&&scroll=855&&scroll=1808&&scroll=2700&&scroll，以下是我的建议。循环浏览页面上的每个部分并获得渲染高度。将每个高度添加到数组中，然后在添加类时循环浏览数组。类似以下内容：

$(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');
        }
    }
});

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var section_height=新数组（）；
var section_position=新数组（）；
$（'.main container'）.children（）.each（function（））{
截面高度推送（$（this.height（））；
截面位置推动（$（此）.offset（）.top）；
});
对于（i=0；i截面位置[i]-（截面高度[i]/4））{
$（'.mainNav li'）。不是（':n个子（'+i+'））。查找（'a'）。移除类（'selected'）；
$（'.mainNav li:n个子（'+i+'）a'）.addClass（'selected'）；
}否则{
$（'.mainNav li:n个子（'+i+'）a'）.removeClass（'selected'）；
}
}
});

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

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop() + 90;
        var currentArea = $('.area').filter(function() {
            return scroll <= $(this).offset().top + $(this).height();
        });
        $('nav a').removeClass('selected');
        $('nav a[href=#' + currentArea.attr('id') +']').addClass('selected');
        //console.debug('nav a[href=#' + currentArea.attr('id') +']');
    });
});

$（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）+90；
var currentArea=$（'.area'）.filter（函数（）{
返回滚动条这些答案是否解决了您的问题？如果您的问题已解决，请接受答案。否则，请告知我们还能提供哪些帮助。