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

Question

On my current site (uptrde.com) I have it setup to when you scroll to a certain section of the page the nav a that corresponds with that section lights up. However, I feel that the way I am doing it with jQuery is difficult and not modular at all. My code for animating the page scrolls works fine, just this last bit is giving me trouble. I would like to make this code more modular so if I add more sections to the site in the future I don't have to figure out new values. Thank you for your help.

$(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

Here's what I'd recommend. Loop through each of the sections on the page and get the rendered height. Add each of those heights to an array, and then loop through the array when you are adding the classes. Something like this:

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

I haven't tested this with your site, but I used the same code on another site earlier today, and it worked like a charm. You'll want to play with the calculation used in the if statement in the for loop. I have it set to change to the next section when you're about 1/4 of the height away from it. In other words, I wanted it to change to the next nav element when you were "almost" to it in the scroll position. I didn't want to have to wait till it was all the way at the top of your screen before changing the highlighted nav element. You, however, may choose to do it differently.

Answer 2

maybe this can help you

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

JSFiddle: http://jsfiddle.net/LGzxq/1/