交叉路观察员突出显示海军李

问题描述

最近,我正在开发一个包含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 (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...