Почему класс не удаляется при прокрутке страницы?

Добрый день! Можете, пожалуйста, объяснить, в чем заключается проблема с удалением класса при прокрутке страницы вверх? Я замечаю, что элементы продолжают сохранять добавленные классы, даже когда я возвращаюсь к верхней части страницы. 

Вот фрагмент кода, который я использую: 
<pre><code class="javascript">window.onscroll = function() {
    const navbar = document.getElementById("navblock");
    const splitInner = document.querySelector(".split-inner");
    
    const sticky = navbar.offsetTop;

    if (window.pageYOffset &gt;= sticky) {
        navbar.classList.add("sticky");
        splitInner.classList.add("stick")
    } else {
        navbar.classList.remove("sticky");
        splitInner.classList.remove("stick");
    }
};</code></pre>
  • 13 октября 2024 г. 8:42
Ответы на вопрос 2
Добрый день! В вашем коде есть небольшая ошибка в условии, отвечающем за добавление и удаление классов. 

1. **Проверка условий**: Убедитесь, что условие проверки скролла срабатывает правильно. Если `navbar.offsetTop` — это позиция, по достижении которой вы хотите сделать вашу навигацию "липкой" (sticky), то код, как я вижу, должен работать.

2. **Использование `>=` и `<=`**: Обратите внимание, что в вашем условии используется только `>=`. Это может быть проблемой, если `sticky` состояние какое-то время сохраняется после того, как вы достигли верхней части страницы. Вместо этого вы уделяете внимание только текущему свойству `pageYOffset`, которое должно быть строго меньше, чтобы удалить класс.

3. **Логика добавления и удаления классов**: Убедитесь, что условие для удаления классов срабатывает как ожидается. На первый взгляд, ваш код должен работать правильно, но есть вероятность, что что-то в других частях кода или CSS мешает этому.

Вот некоторые шаги, которые можно предпринять для отладки:

- Убедитесь, что `navbar.offsetTop` правильно вычисляется и соответствует позиции, где вы хотите, чтобы класс добавлялся или удалялся.
- Смотрите, не отменяется ли добавление/удаление классов другими обработчиками событий.
- Вставьте `console.log` в ваш код, чтобы отследить, когда выполняется добавление и удаление классов:

```javascript
window.onscroll = function() {
    const navbar = document.getElementById("navblock");
    const splitInner = document.querySelector(".split-inner");
    
    const sticky = navbar.offsetTop;

    console.log("Scroll position:", window.pageYOffset, "Sticky offset:", sticky);

    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky");
        splitInner.classList.add("stick");
        console.log("Classes added");
    } else {
        navbar.classList.remove("sticky");
        splitInner.classList.remove("stick");
        console.log("Classes removed");
    }
};
```

Это позволит вам отследить, когда именно классы добавляются и удаляются. 

Если ваше поведение по-прежнему не соответствует ожиданиям, также стоит проверить CSS-свойства и поведение при прокрутке (например, возможно, используется другой JavaScript-код, который изменяет стили или классы). 

Если все вышеперечисленное не дает результата, пожалуйста, предоставьте дополнительную информацию о HTML и CSS коде, чтобы было легче помочь в решении проблемы.
Потому что в самом начале 
window.pageYOffset == 0
navbar.offsetTop == 0


условие window.pageYOffset >= sticky выполняется
Похожие вопросы