英文:
How to update menu when scrolling website content or reach a particular div
问题
以下是翻译好的部分：
基本上，它显示了一个菜单，其中包含指向页面各部分的链接，当用户滚动页面时，这些链接会突出显示。如何突出显示菜单？如何在HTML、CSS或JavaScript中实现这一效果？
HTML的示例代码：
<section id="main">
<div class="target" id="1">目标 1</div>
<div class="target" id="2">目标 2</div>
<div class="target" id="3">目标 3</div>
<div class="target" id="4">目标 4</div>
</section>
<aside id="nav">
<nav>
<a href="#1" class="active">点 1</a>
<a href="#2">点 2</a>
<a href="#3">点 3</a>
<a href="#4">点 4</a>
</nav>
</aside>
请注意，上述代码示例包括HTML部分的翻译。
英文:
Here is an example:
https://www.msdmanuals.com/professional/pulmonary-disorders/diagnostic-and-therapeutic-pulmonary-procedures/bronchoscopy?query=bronchoscopy
Basically it displays a menu with links to parts of the page that get highlighted as the user scrolls past them. How to highlight the menu? How to achieve this in HTML, CSS or JavaScript?
Sample code of HTML:
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a href="#1" class="active">Punkt 1</a>
<a href="#2">Punkt 2</a>
<a href="#3">Punkt 3</a>
<a href="#4">Punkt 4</a>
</nav>
</aside>
答案1
得分: 1
这是你要找的被称为scrollspy的内容。尝试像这样做：
<section id="main">
<div class="target" id="1">目标 1</div>
<div class="target" id="2">目标 2</div>
<div class="target" id="3">目标 3</div>
<div class="target" id="4">目标 4</div>
</section>
<aside id="nav">
<nav>
<a class="link" id="link_1" href="#1">点 1</a>
<a class="link" id="link_2" href="#2">点 2</a>
<a class="link" id="link_3" href="#3">点 3</a>
<a class="link" id="link_4" href="#4">点 4</a>
</nav>
</aside>
a.active {
background-color: #CCCCFF;
}
还有JS代码：
// 不需要 JQuery
function isInViewport(el) {
const rect = el.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
window.onscroll = () => {
for(el of document.getElementsByClassName('list')) {
el.classList.remove('active'); // 重置列表
}
// 找到视口中的元素
for(el of document.getElementsByClassName('target')) {
if(isInViewport(el)) {
// 设置活动元素
document.getElementById('link_' + el.id).classList.add('active');
}
}
}
这应该适用于你。
英文:
That's what you're looking for is named scrollspy. Try something like that:
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a class="link" id="link_1" href="#1">Punkt 1</a>
<a class="link" id="link_2" href="#2">Punkt 2</a>
<a class="link" id="link_3" href="#3">Punkt 3</a>
<a class="link" id="link_4" href="#4">Punkt 4</a>
</nav>
</aside>
a.active {
background-color: #CCCCFF;
}
And JS:
// doesn't require JQuery
function isInViewport(el) {
const rect = el.getBoundingClientRect()
const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
const windowWidth = (window.innerWidth || document.documentElement.clientWidth)
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0)
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0)
return (vertInView && horInView)
}
window.onscroll = () => {
for(el of document.getElementsByClassName('list')) {
el.classList.remove('active') // reset list
}
// finding element in the viewport
for(el of document.getElementsByClassName('target')) {
if(isInViewport(el)) {
// setting active element
document.getElementById('link_' + el.id).classList.add('active')
}
}
}
That should work for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论