Меню навигации темы Divi активно при прокрутке

Я работаю над навигацией по меню с якорными ссылками, и я хочу, чтобы меню отображалось активным при прокрутке, но все равно работало, если я перейду на другую страницу.

Пожалуйста, проверьте собранные мной коды и ссылки в моем меню WordPress.

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>

мой пример ссылок меню:
https://sample.com/#section-1
https://sample.com/#section-2
https://sample.com/#section-3
и так далее ....

моя ошибка консоли такова:

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)

javascript wordpress jquery divi-theme
person Rene Chin    schedule 29.06.2019    source источник
comment
это работает только с # section-1 и не будет работать с sample.com/#section-1   -  person Rene Chin    schedule 05.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я вручную выяснил свою проблему с этим кодом ниже. Я надеюсь, что смогу помочь другим разработчикам, которые нуждаются в этом «активном классе изменения навигации, когда страница прокручивается до разделов» с помощью этого кода ниже. Я работаю с этим кодом для своей темы Divi, но я думаю, что он также может работать с другой темой.

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

});

С ДНЁМ КОДИРОВКИ !!!

person Rene Chin    schedule 05.07.2019