Меню прокрутки темы Divi активно при прокрутке - PullRequest
Новая
       12

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

0 голосов
/ 29 июня 2019

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

Пожалуйста, проверьте коды, которые я собрал, и моиссылки меню 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)

1 Ответ

0 голосов
/ 05 июля 2019

Я вручную выяснил мою проблему с этим кодом ниже. Я надеюсь, что смогу помочь другим разработчикам, которые нуждаются в этом "активном классе изменения навигации, поскольку страница прокручивается до разделов" с помощью этого кода ниже. Я работаю над этим кодом для моей темы 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');
    }

});

СЧАСТЛИВЫЙ КОДИНГ !!!

...