1 回答
TA貢獻1770條經驗 獲得超3個贊
您給出的錯誤是由第一個鏈接引起的。
href 是#這樣的link.hash屬性""
兩者都document.querySelector("")引發document.querySelector("#")錯誤。解決方案是在散列不為空時添加檢查。
if (link.hash != "" && link.hash != "#") {
請注意,Home鏈接將始終保持活動狀態,因為它沒有相應的<div id="home">元素
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
if (link.hash != "" && link.hash != "#") {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
}
})
});
nav a.active {
color: darkcyan;
border-bottom: 2px solid darkgoldenrod;
}
/* for demonstration purposes */
nav {
position: fixed;
top: 0;
}
#about,
#contact {
height: 100vh;
}
<nav>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section>
<div id="about">About</div>
<div id="contact">Contact</div>
</section>
添加回答
舉報
