Плавная фиксация меню на сайте WordPress после небольшой прокрутки
Захотел я хедер на сайте плавно зафиксировать при прокрутке
Чтобы не сразу фиксировался как банный лист к одному месту, а немного выезжал при прокрутке с анимацией
<header id="site-header" class="medium-header has-social hidden-menu clr"...
Для этого небольшой скрипт в header.php
Я указал 86 пикселей (момент срабатывания). Рекомендую ставить чуть побольше (или больше побольше) высота вашего фиксируемого блока
document.addEventListener('DOMContentLoaded', () => {
const header = document.getElementById('site-header');
if (!header) return;
let isFixed = false;
window.addEventListener('scroll', () => {
const scroll = window.scrollY;
if (scroll > 86 && !isFixed) {
document.body.classList.add('header-is-fixed');
isFixed = true;
} else if (scroll <= 86 && isFixed) {
document.body.classList.remove('header-is-fixed');
isFixed = false;
}
}, { passive: true });
});
и css код
/* Основной хедер — остаётся в потоке */
#site-header.medium-header {
position: relative;
padding: 20px 0;
border-bottom: 1px solid;
transition: none; /* никаких transition здесь! */
}
/* Класс для fixed-состояния */
body.header-is-fixed #site-header.medium-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: #fff; /* обязательно! иначе будет прозрачным */
padding: 20px 0;
border-bottom: 1px solid;
/* Анимация: выезжает сверху */
animation: slideDown 0.3s ease forwards;
}
/* Отступ под хедер, чтобы контент не прыгал */
#page-wrap {
padding-top: 80px; /* подстрой под свою высоту */
}
/* Анимация */
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}