Як додати клас під час прокручування сторінки

Розберемо таке завдання: потрібно додати клас заданому елементу (наприклад 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. Якщо менше прокрутив – видаляємо клас.

Ось так легко можна додати або видалити клас будь-якого елемента під час скролу сторінки.