Divi theme navigation menu active when scroll

Question

I'm working on a menu navigation with an anchor links and I want the menu will show active when scroll but still works if I go to another page.

Please check the codes I have gathered and my wordpress menu links.

this codes worked if the menu links is #section-1 only and not this https://sample.com/#section-1

<script type="text/javascript"> 
(function($) {
    $(document).ready(function() {
        var navChildren = $("#top-menu li").children();
        var aArray = [];
        for (var i = 0; i < navChildren.length; i++) {
            var aChild = navChildren[i];
            var ahref = $(aChild).attr('href');
            aArray.push(ahref);
        }
        $(window).scroll(function() {
            var windowPos = $(window).scrollTop();
            var windowHeight = $(window).height();
            var docHeight = $(document).height();
            for (var i = 0; i < aArray.length; i++) {
                var theID = aArray[i];
                var secPosition = $(theID).offset().top;
                secPosition = secPosition - 230; //135
                var divHeight = $(theID).height();
                divHeight = divHeight + 90;
                if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
                    $("a[href='" + theID + "']").parent().addClass("current-item");
                        console.log("a[href='" + theID + "']");
                    } else {
                    $("a[href='" + theID + "']").parent().removeClass("current-item");
                    console.log("a[href='" + theID + "']");
                }
             }
        });

    });
})(jQuery);
</script>

my menu links sample are:
https://sample.com/#section-1
https://sample.com/#section-2
https://sample.com/#section-3
and so on....

my console error is this:

Uncaught Error: Syntax error, unrecognized expression: 
https://pflege.cdemo.me/#section-1
at Function.ea.error (jquery.js?ver=1.12.4-wp:2)
at ea.tokenize (jquery.js?ver=1.12.4-wp:2)
at ea.select (jquery.js?ver=1.12.4-wp:2)
at Function.ea (jquery.js?ver=1.12.4-wp:2)
at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
at n.fn.init.find (jquery.js?ver=1.12.4-wp:2)
at n.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
at a.fn.init.n.fn.init (jquery.js?ver=1.12.4-wp:2)
at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
at n (jquery.js?ver=1.12.4-wp:2)

this works on #section-1 only and will not work with https://sample.com/#section-1 — Rene Chin, Jul 05 '19 at 05:33

score 0 · Answer 1 · answered Jul 05 '19 at 05:22

I manually figured out my problem with this code below. I hope I could help for other developers that are needing this "change navigation active class as the page is scroll to sections" with this code below. I'm working this code to my Divi theme but I think it can also work with other theme.

jQuery(window).scroll(function() {

    if (jQuery(document).scrollTop() >= jQuery('#section-1').offset().top) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(0)').addClass('current-item');
    }
    if (jQuery(document).scrollTop() >= jQuery('#section-2').offset().top - 135) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(1)').addClass('current-item');
    }
    if (jQuery(document).scrollTop() >= jQuery('#section-3').offset().top - 135) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(2)').addClass('current-item');
    }
    if (jQuery(document).scrollTop() >= jQuery('#section-4').offset().top - 135) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(3)').addClass('current-item');
    }
    if (jQuery(document).scrollTop() >= jQuery('#section-6').offset().top - 135) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(4)').addClass('current-item');
    }
    if (jQuery(document).scrollTop() >= jQuery('#section-7').offset().top - 135) {
        jQuery('#top-menu li').removeClass('current-item');
        jQuery('#top-menu li:eq(5)').addClass('current-item');
    }

});

HAPPY CODING!!!

Divi theme navigation menu active when scroll

1 Answers1