Question

我正在使用带有锚链接的菜单导航，我希望菜单在滚动时显示为活动状态，但是如果我转到另一页仍然可以使用。

请检查我收集的代码和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)

Answer 1

我用下面的代码手动找出了我的问题。我希望我可以为其他需要此“在页面滚动到各个部分时更改导航活动类”的开发人员提供以下代码。我正在将此代码用于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');
    }

});

快乐的编码！

滚动时激活Divi主题导航菜单

1 个答案: