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

🗓️ Оновлено: 22.08.2022
💬Коментарів: 0
👁️Переглядів: 2989

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

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

Стаття була корисною?
👍
Так - 11
👎
Ні - 0
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18282
Поява елементів при скролі
Переглядів: 16838
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6952
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6789
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab