bash0ne bash0ne - 15 days ago 7
CSS Question

Skip active class for certain elements when scrolling

I have following problem:

I wanted to implement some logic to set the active class on list elements in my navigation bar while scrolling. I used this snippet:

$(window).bind('scroll', function () {
var scrollPos = $(window).scrollTop() + 100;
$('#nav-menu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
currLink = currLink.parent();
if (refElement.position().top <= scrollPos) { //&& refElement.position().top + refElement.height() > scrollPos
$('.nav > li').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
});


It works fine when I scroll and therefore also when I click on a link inside the navigation bar. Assume I have 5 links that refer to 5 different div's. Let's say I am currently at the position of the first div.
Now I click at the last link and it scrolls through the div's. But now every link in between gains the active class as I am scrolling.


Can you suggest a workaround to skip the links in between ?

EDIT: This is the click-to-scroll code part:

// Page scroll
$('a.page-scroll').click(function () {
$(".nav > li").removeClass("active");
// $(this).parent().addClass("active");
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 40
}, 900);
return false;
}
}
});

Answer

Modified your code per my comment on your question above. Let me know if this is working. I commented my modifications so you can CMD/CTRL+F for --CapitalQ.

$(window).bind('scroll', function () {
    var scrollPos = $(window).scrollTop() + 100;
    $('#nav-menu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        currLink = currLink.parent();
        if (refElement.position().top <= scrollPos) {
            $('.nav > li').removeClass("active");

            // added a check here to only add "active" if body not scrolling --CapitalQ
            if (!$('body').hasClass('scrolling')) {
                currLink.addClass("active");
            }
        }
        else {
            currLink.removeClass("active");
        }
    });
});

$('a.page-scroll').click(function () {

    // Add scrolling class to body --CapitalQ
    $('body').addClass('scrolling');

    $(".nav > li").removeClass("active");
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 40
            }, 900, function () {

                // added callback to jQ animate function --CapitalQ
                $('body').removeClass('scrolling');
                $(this).parent().addClass('active');
            });

            return false;
        }
    }
});
Comments