Adding a CSS class based on browser scroll position with jQuery - looking for a more modular approach

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>

Did either of these answers solve your problem? Please accept an answer if your problem is solved. Otherwise, let us know how else we can help. — codescribblr
– codescribblr, Commented Jun 1, 2014 at 20:53

codescribblr · Accepted Answer · 2014-05-15 03:18:56Z

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.

arvic.rivera · Accepted Answer · 2014-05-15 04:02:40Z

1

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/

edited May 15, 2014 at 4:02

answered May 15, 2014 at 3:54

arvic.rivera

6715 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding a CSS class based on browser scroll position with jQuery - looking for a more modular approach

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related