Frontender Libs - обзор библио… on Telegram: “Sticky Header Sticky Header

Sticky Header

Sticky Header — это фиксированный заголовок, который остаётся видимым при прокрутке страницы. Это улучшает UX, обеспечивая постоянный доступ к навигации или ключевой информации, особенно на длинных страницах.

Рассмотрим два подхода:

1. CSS:

.header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Добавьте класс к вашему <header>, и он будет прилипать к верхней части экрана при прокрутке.

2. JavaScript + CSS:

const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
  if (window.scrollY > 0) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

.header.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

👉 @sWebDev | #полезные_сниппеты