滚动条上的突出显示菜单项不起作用

debugcn 发表于 Dev

编码

下一个问题是我的问题：只有我代码的最后一部分添加了该类，其余部分则没有。（在5处）我的html的每个部分都有一个唯一的类，并且列表标签中也有相同的类

1个使用类，href和数据集创建列表

 for (var i = 0; i < sections.length; i++) {
        const list = `<li><a class="links_menu" 
     href="#${sections[i].id}">${sections[i].dataset.name}</a> 
        </li>`;
        navList += list;      
    }

    nav.innerHTML = navList;//list is add it to the nav

2滚动到部分

links.forEach(link => {
    link.addEventListener('click', toSection);
})

function toSection(e) { 
    e.preventDefault();
    sections.forEach(section => {
        if(e.target.href.search(section.id) != -1) { 
            section.scrollIntoView({behavior: "smooth"});
        }
    })
}

3添加和删除激活类

const activ = () => {
    sections.forEach(clas => {
        const view = clas.getBoundingClientRect()
        if (view.top < 50 && view.top >= -800){
            clas.classList.add("active");
        }
        else{
            clas.classList.remove("active"); 
        }
    })
};

window.addEventListener('scroll', activ);

4功能回到顶部

function goToTop() {
    document.documentElement.scrollTop = 0;
}

topButton.addEventListener('click', goToTop)

5添加和删除Activ Classes菜单

 const linkMenus = document.querySelectorAll('a')
 const activNav = () => {
       sections.forEach(sec => {
         linkMenus.forEach(lis => {
             if (lis.classList.contains(sec.id) && sec.classList.contains("active")){
             lis.classList.add("active_nav");
             }
             else{
                 lis.classList.remove("active_nav"); 
             };           
         })       
     })    
 };

window.addEventListener('scroll', activNav)

塔哈·哈拉比（Taha Halabi）

我之前提出过这个想法，我将放置HTML，CSS和JS代码，您可以阅读并使用JS代码，也许会对您有所帮助。

您可以在Codepen上查看代码或使用代码段。

如果您有任何问题，请问我。

专注于JavaScript中的以下代码：

window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight

片段：

var sections = document.getElementsByTagName("section"),
    li       = document.getElementsByClassName("li"),
    i;

window.onscroll = function () {
    
    for ( i = 0 ; i < sections.length ; i = i + 1 ) {
        
        if ( window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight ) {
            
            li[i].classList.add("red");
            sections[i].classList.add("red");
            
        } else {
            li[i].classList.remove("red");
            sections[i].classList.remove("red");
        }
        
    }
    
}

body
{
    margin:0;
    padding:0;
    font-family:sans-serif;
    height:2800px;
    background:#ccc;
}
.fixed
{
    position:fixed;
    width:300px;
    height:200px;
    background:#ccc;
    right:20px;
    top:50px;
    padding:20px;
    box-sizing:border-box;
}
.fixed ul 
{
    margin:0;
    padding:0;
}
.fixed ul li
{
    line-height:40px;
    list-style-type:none;
    font-size:25px;
    font-weight:bold;
}
section
{
    width:100%;
    height:600px;
    background:yellowgreen;
    box-sizing:border-box;
    border:4px solid;
    margin-top:25px;
    line-height:600px;
    font-size:40px;
    text-align:center;
    font-weight:bold;
}
.red
{
    color:red;
}

<div class="fixed">
    <ul>
        <li class="li">one</li>
        <li class="li">two</li>
        <li class="li">three</li>
        <li class="li">four</li>
    </ul>
</div>

<section>one</section>
<section>two</section>
<section>three</section>
<section>four</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。