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

🗓️ Обновлено: 11.08.2021
💬Комментариев: 0
👁️Просмотров: 1130
web

Разберем такую задачу: нужно добавить класс заданному элементу (например, 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. Если меньше прокрутил — удаляем класс.

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

Статья была полезной?
👍
Да - 6
👎
Нет - 0
💬 Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете 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