Как добавить класс при прокрутке страницы

Разберем такую задачу: нужно добавить класс заданному элементу (например, header) при скролле страницы.

Приступим. Такую задачу мы можем решить с помощью JavaScript. Я пропишу два варианта решения — на чистом js и с использованием библиотеки jquery.

Добавляем класс элементу при скролле страницы (Чистый JavaScript):

//Записываем, сколько проскроллено по вертикали
let scrollpos = window.scrollY

const header = document.querySelector("header")

//Сколько пикселей нужно проскролить, чтобы добавить класс. Можете изменить значение
const scrollChange = 1

//Функция, которая будет добавлять класс
const add_class_on_scroll = () => header.classList.add("bg-red")

//Отслеживаем событие "скролл"
window.addEventListener('scroll', function() { 
  scrollpos = window.scrollY;

  //Если прокрутили больше, чем мы указали в переменной scrollChange, то выполняется функция добавления класса
  if (scrollpos >= scrollChange) { add_class_on_scroll() }
})

Давайте улучшим этот код и сделаем так, что если проскролили меньше 1px, то класс удаляется:

let scrollpos = window.scrollY

const header = document.querySelector("header")
const scrollChange = 1

const add_class_on_scroll = () => header.classList.add("bg-red")
const remove_class_on_scroll = () => header.classList.remove("bg-red")

window.addEventListener('scroll', function() { 
  scrollpos = window.scrollY;

  if (scrollpos >= scrollChange) { add_class_on_scroll() }
  else { remove_class_on_scroll() }
  
})

Здесь мы добавили новую функцию remove_class_on_scroll, которая удаляет определенный класс из выбранного элемента. Выполняться эта функция будет в том случае, если пользователь не проскролил 1px от начала страницы.

Теперь то же самое напишем на jquery:

var header = $(".header");
var scrollChange = 1;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= scrollChange) {
        header.addClass('bg-red');
    } else {
        header.removeClass("bg-red");
    }
});

Здесь мы прописали тоже самое, если пользователь прокрутил больше 1px страницы, то header мы добавляем класс bg-red. Если меньше прокрутил — удаляем класс.

Вот так легко можно добавить или удалить класс любому элементу при скролле страницы.