英文:
Get the id of current section on scroll in JavaScript
问题
我正在尝试构建一个点导航，即当您单击每个 "div" 时，它会将您带到特定的部分，这部分目前已经实现。
但是，当滚动时，我还需要更改这些 "div" 的当前状态为活动状态。我该怎么做？
有一个关于点导航外观的图片。
我在寻找如何获取每个部分的滚动位置并将它们分配给各个变量，然后运行一些函数。
<div class="dot-navigation">
<div>
<a href="#home"></a>
</div>
<div>
<a href="#about"></a>
</div>
<div>
<a href="#services"></a>
</div>
<div>
<a href="#clients"></a>
</div>
<div>
<a href="#reviews"></a>
</div>
<div>
<a href="#contactus"></a>
</div>
</div>
英文:
I'm trying to build a dot navigation kind of thing, i.e., when you click on each "div" it takes you to the specific section, which is currently implemented.
But, also while scrolling I need to change the current state of this div's to active. How do I do that?
An image on how the dot navigation looks.
I was looking how to get scroll positions of each section and assign them to each variables and run some function.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="dot-navigation">
<div>
<a href="#home"></a>
</div>
<div>
<a href="#about"></a>
</div>
<div>
<a href="#services"></a>
</div>
<div>
<a href="#clients"></a>
</div>
<div>
<a href="#reviews"></a>
</div>
<div>
<a href="#contactus"></a>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
监听滚动事件，找到当前显示的区域，并根据需要突出显示导航元素。
英文:
Listen for scroll events, find the currently displayed region, and highlight the navigation elements as necessary.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener('DOMContentLoaded', updateNav);
window.addEventListener('scroll', updateNav);
function updateNav() {
const currentRegion = [...document.querySelectorAll(".region:not([id=''])")]
.find(e=>e.getBoundingClientRect().top>=0)
if(currentRegion) {
window.location.hash = `#${currentRegion.id}`;
[...document.querySelectorAll(`a:not([href='#${currentRegion.id}'])`)]
.forEach(a=>a.classList.remove('red'))
document.querySelector(`a[href='#${currentRegion.id}']`)?.classList.add('red')
}
}
<!-- language: lang-css -->
a { text-decoration:none; color: black}
.red { color: red; }
.region { margin-left: 100px; min-height: 500px; }
.dot-navigation { position:fixed }
<!-- language: lang-html -->
<div class="dot-navigation">
<div><a href="#home">o</a></div>
<div><a href="#about">o</a></div>
<div><a href="#services">o</a></div>
<div><a href="#clients">o</a></div>
<div><a href="#reviews">o</a></div>
<div><a href="#contactus">o</a></div>
</div>
<div class="region" id="home">home...</div>
<div class="region" id="about">about...</div>
<div class="region" id="services">services...</div>
<div class="region" id="clients">clients...</div>
<div class="region" id="reviews">reviews...</div>
<div class="region" id="contactus">contactus...</div>
<!-- end snippet -->
答案2
得分: 0
感谢 Angelina 的评论。
我发现这个链接很有用 https://www.youtube.com/watch?v=fAAk9CATILc
let section = document.querySelectorAll("section");
let dotNav = document.querySelectorAll(".dot-navigation div a");
window.onscroll = () => {
section.forEach((sec) => {
let top = window.scrollY;
let offset = sec.offsetTop - 200;
let height = sec.offsetHeight;
let id = sec.getAttribute("id");
if (top >= offset && top < offset + height) {
dotNav.forEach((dot) => {
dot.classList.remove("navDot-active");
document.querySelector(".dot-navigation div a[href*=" + id + "]").classList.add("navDot-active");
});
}
});
};
英文:
Thanks, Angelina for your comment.
I found this to be useful https://www.youtube.com/watch?v=fAAk9CATILc
let section = document.querySelectorAll("section");
let dotNav = document.querySelectorAll(".dot-navigation div a");
window.onscroll = () => {
section.forEach((sec) => {
let top = window.scrollY;
let offset = sec.offsetTop - 200;
let height = sec.offsetHeight;
let id = sec.getAttribute("id");
if (top >= offset && top < offset + height) {
dotNav.forEach((dot) => {
dot.classList.remove("navDot-active");
document.querySelector(".dot-navigation div a[href*=" + id + "]").classList.add("navDot-active");
});
}
});
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论