未突出顯示活動錨鏈接
[英]active anchor link not being highlighted
問題描述
我一直盯着這段代碼太久了，不幸的是我沒有看到問題所在。
當相關 div 滾動到視圖中時，我試圖突出顯示活動菜單條目。 但是什么也沒發生，控制台中也沒有拋出任何錯誤。
我的菜單 html：
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
一個示例div：
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
我的jQuery/js：
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}
1 個解決方案
解決方案1
0 2021-07-27 17:18:05
對滾動進行算術運算非常繁瑣，因此此代碼段使用 IntersectionObserver 代替。 這具有減少處理開銷的額外好處，因為它只會在元素進入或離開視圖時得到通知，而不是每次用戶滾動一點時。
它設置觀察者以觀察任何相關元素何時進入或離開視口。 當收到警報時，它會添加或刪除相關導航欄鏈接的突出顯示類。
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <style> .LeftAnchorNav { position: fixed; z-index:1; } .tall { width: 100vw; height: 100vh; background-image: linear-gradient(cyan, magenta, yellow, black); } .highlightleftnavactive { background-color: yellow; } </style> </head> <section class="LeftAnchorNav" style="display: block;"> <nav id="LeftAnchorNav"> <div class="container" style="padding-left: 50px;"> <div class="col-md-4 LeftAnchorNavWrapper"> <ul class="LeftAnchorNavMenu"> <li class="leftanchorlink"> <a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a> </li> <li class="leftanchorlink"> <a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a> </li> </ul> </div> </div> </nav> </section> <div class="tall"></div> <div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"> An example block coming into and going out of view it belongs to the About us link in the navbar</div> </div> <div class="tall"></div> <script> let callback = (entries) => { entries.forEach(entry => { let id = entry.target.firstChild.id; let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']"); if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');} else { leftLink.classList.remove('highlightleftnavactive');} }); }; const observer = new IntersectionObserver(callback); const anchorBlocks = document.querySelectorAll('.anchorblock'); anchorBlocks.forEach( (anchorBlock) => { observer.observe(anchorBlock); }); </script>
網站的活動按鈕突出顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.