如何解决交叉路观察员突出显示海军李
最近,我正在开发一个包含3个部分的简单一页网站,我尝试使用Intersection Observer API来实现一个功能,该功能使我可以滚动到部分内容,并在导航栏中突出显示正确的li / link,因此例如,如果我滚动到“关于”部分,则导航栏上的“关于li /链接”会突出显示,而其他人则不会。
使用Intersection Observer API是否可行,因为我的各个部分的高度都不同?
这就是我现在拥有的:
HTML
<body>
<header>
<ul>
<li class="li-one">One</li>
<li class="li-two">Two</li>
<li class="li-three">Three</li>
</ul>
</header>
<div class="main-container">
<div class="hero"></div>
<section class="section-one" data-li="li-one">
<h1>Section One</h1>
</section>
<section class="section-two" data-li="li-two">
<h1>Section Two</h1>
</section>
<section class="section-three" data-li="li-three">
<h1>Section Three</h1>
</section>
</div>
<script src="./script.js"></script>
</body>
CSS
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
h1{
width:100%;
text-align: center;
border: 2px solid blue;
}
header{
position: fixed;
background-color: black;
color: white;
width: 100%;
height:70px;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
height: 100%;;
}
header ul li{
padding: 2rem;
list-style: none;
font-size: 1.5rem;
cursor: pointer;
}
.active{
color: orange;
}
.hero{
height: 100vh;
border: 4px solid red;
}
.section-one{
display: flex;
justify-content: center;
align-items: center;
height:250px;
border: 4px solid purple;
}
.section-two{
display: flex;
justify-content: center;
align-items: center;
height:550px;
border: 4px solid green;
}
.section-three{
display: flex;
justify-content: center;
align-items: center;
height:1050px;
border: 4px solid orange;
}
Javascript
const sections = [...document.querySelectorAll('section')];
const observerOptions = {
root: null,rootMargin: '0px',threshold: 0.2,}
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const getLiClass = entry.target.getAttribute('data-li');
const getLiElement = document.querySelector(`.${getLiClass}`);
if(window.innerHeight >= entry.intersectionRect.top / 2 && entry.isIntersecting){
getLiElement.classList.add('active');
}else{
getLiElement.classList.remove('active');
}
});
},observerOptions);
sections.forEach((section) => {
sectionObserver.observe(section);
});
我尝试过使用交集观察器API的不同方法,而上述方法是我的最新方法,但是如您所见,它一次不会在导航中突出显示li / link,我还尝试了一种在以下位置突出显示li / link的方法:一段时间但是这种方法的问题是,如果我没有完全滚动到某个部分,而只是向后滚动导航栏上的高亮显示li / link则没有响应(例如,滚动到第一部分到第二部分(但是第一部分)仍在视图中),第二节li / link会突出显示,然后我滚动回到第一节,导航栏上的第一节li / link未突出显示,但第二节li / link仍然突出显示)。
使用相交观察器API对具有不同高度的路段是否可行? (之所以使用路口观察器API,是因为我做了一些研究,与使用window.addEventListener('scroll',callback)相比,它似乎具有更好的性能。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com(将#修改为@)