Блог

Главная - Вопросы по программированию - Выделение пункта меню при прокрутке не работает

Выделение пункта меню при прокрутке не работает

#javascript

#javascript

Вопрос:

Проблема, с которой я столкнулся, заключается в следующем: только последний раздел моего кода добавляет класс, а остальные нет. Каждый раздел моего html имеет уникальный класс, и тот же класс также находится в тегах списка

 const activ = () => {
    const linkMenus = document.querySelectorAll('a')
    sections.forEach(clas => {
        const view = clas.getBoundingClientRect()
        if (view.top < 50 amp;amp; view.top >= -800){
            clas.classList.add("active");
            linkMenus.forEach(lis => {
                if (clas.classList.contains("active") amp;amp; 
lis.classList.contains(clas.id)){
                    lis.classList.add("active_nav");
                 }
                 else {
                 lis.classList.remove("active_nav"); 
                 }
            })
        }
        else{
        clas.classList.remove("active"); 
        }
    })
};

window.addEventListener('scroll', activ)

Комментарии:

1. .contains это метод Java, который вы хотите использовать .includes ?

2. Я думаю, что .includes используется только для поиска слов в строке

3. Что вы пытались отладить проблему?

Ответ №1:

Я уже высказывал эту идею раньше, я выложу свой HTML, CSS и JS-код, вы можете прочитать его и использовать JS-код, может быть, это вам поможет.

вы можете просмотреть код в Codepen или использовать фрагмент кода.

Если у вас есть какие-либо вопросы, задайте их мне.

Сосредоточьтесь на этом коде в JavaScript:

 window.scrollY > sections[i].offsetTop amp;amp; 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 amp;amp; 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>