добавить/удалить класс с помощью jQuery на основе вертикального прокрутки

В данном случае цель состоит в том, чтобы удалить класс из элемента «заголовок», как только пользователь прокручивает определенное расстояние, а затем применить другой класс, чтобы изменить его внешний вид. Однако предоставленный код не функционирует, как предназначен, из -за некоторых незначительных ошибок. var scroll = $ (window) .scrolltop (); //> =, не = 500) { // clearheader, не clearheader - caps h $ (". Clearheader"). addClass ("Darkheader"); } });

было три основных вопроса:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not = 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

Оператор сравнения был неверным; Это должно быть> = проверить, больше ли позиция прокрутки или равна 500. отсутствовал в конце объявления функции.

В дополнение к исправлению этих ошибок, рассмотрите следующее:
2. вместо удаления класса Clearheader, лучше добавить к нему класс Darkheader. Это сохраняет положение заголовка при изменении своего внешнего вида. $ (". Clearheader"). addClass ("Darkheader"); } еще { $ (". Clearheader"). RemoveClass ("Darkheader"); }
3. Наконец, кэширование объекта jQuery для заголовка может улучшить производительность, особенно если вы планируете изменить его класс несколько раз:

var header = $ (". Clearheader"); $ (window) .scroll (function () { var scroll = $ (window) .scrolltop (); if (scroll> = 500) { header.removeclass ('clearheader'). addclass ("Darkheader"); } еще { header.removeclass ("Darkheader"). addclass ('clearheader'); } });

. Решая эти проблемы, теперь вы можете эффективно добавить и удалить классы из заголовка на основе положения вертикальной прокрутки пользователя.