Фіксаціїя шапки (блоку). Заміна класу html тегу на чистому JavaScript після прокрутки сторінки

Як змінити, додати або видалити клас html тегу (div, input чи іншого елемента) після події, наприклад для прилипання шапки чи іншого елемента при прокрутці сторінки.

Змінити, видалити або додати class будь якого елеманта в HTML коді можна за допомогою чистого JavaScript або з використанням бібліотеки jQuery. Такі дії робляться наприклад: для фіксації шапки при прокрутці

Варіант зміни класу елементу при прокрутці сторінки з використанням бібліотеки jQuery (якщо вона вже підключена до вашого сайту):

<script type="text/javascript">

jQuery(document).ready(function(){

    jQuery(window).scroll(function() {

        var scroll = jQuery(window).scrollTop();

        if (scroll >= 50) {

            jQuery(".header").addClass("header-fixed");

        } else {

            jQuery(".header").removeClass("header-fixed");

        }

    });

});

</script>

Даний скрипт добавляє до елементу з класом header ще одни клас header-fixed, у випадку коли сторінка прокрутилась на 50 або більше пікселів, або видаляє цей клас коли сторінка не прокручена. Так можна фіксувати шапку сайту при прокрутці чи інший блок.

Фіксаціїя шапки при прокрутці. Зміна класу елемента на чистому JavaScript

Зверни увагу, що ми використовуємо DOMContentLoaded, щоб скрипт спрацював тільки тоді, коли структура сайту завантажилася.

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
// Отримуємо кількість пікселів прокрутки (кросбраузерно)
const scroll = window.scrollY || document.documentElement.scrollTop;

if (scroll >= 50) {
header.classList.add('header-fixed');
} else {
header.classList.remove('header-fixed');
}
});
});

</script>

в чому різниця між чистим JavaScript та jQuery:

• JavaScript працює швидше, він не завантажує додаткові бібліотеки
• jQuery(document).ready() замінено на document.addEventListener('DOMContentLoaded', ...). Це стандартний спосіб сказати браузеру: "зачекай, поки HTML завантажиться".
• jQuery(".header") замінено на document.querySelector('.header'). Це універсальний метод пошуку елементів, який працює так само як CSS-селектор.
• jQuery(window).scrollTop() замінено на window.scrollY. Це сучасна властивість, яка показує, на скільки прокручена сторінка.
• addClass/removeClass замінено на classList.add() та classList.remove(). Це нативний і дуже швидкий метод роботи з класами елемента.

Оптимізація (для кращої швидкості). JavaScript + css.

Подія scroll спрацьовує десятки разів на секунду, що може трохи навантажувати процесор. Якщо ти хочеш, щоб все працювало максимально гладко (особливо на мобільних), краще використовувати властивість requestAnimationFrame:

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.header');
let ticking = false;

window.addEventListener('scroll', function() {
if (!ticking) {
window.requestAnimationFrame(function() {
if (window.scrollY >= 50) {
header.classList.add('header-fixed');
} else {
header.classList.remove('header-fixed');
}
ticking = false;
});
ticking = true;
}
});
});

</script>

Маленька порада по CSS:

Щоб шапка з'являлася або фіксувалася плавно, не забудь додати в CSS для класу .header властивість transition:

.header {
transition: all 0.3s ease; /* Додасть плавності при зміні кольору чи висоти */
position: relative;
z-index: 1000;
}

.header-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff; /* Наприклад, білий фон при скролі */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}