[英]Divi theme navigation menu active when scroll
我正在使用帶有錨鏈接的菜單導航,我希望菜單在滾動時顯示為活動狀態,但是如果我轉到另一個頁面仍然可以使用。
請檢查我收集的代碼和我的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)
我在下面的代碼中手動找出了問題。 我希望我可以為其他需要此“在頁面滾動到各個部分時更改導航活動類”的開發人員提供以下代碼。 我正在將此代碼用於我的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');
}
});
愉快的編碼!!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.