Фиксация div при прокрутке: решение на CSS с примером

Быстрый ответ

Для того чтобы сделать ваш div фиксированным при достижении верха экрана, добавьте к нему класс fixed:

window.onscroll = () => {
  const div = document.getElementById('fixMe');
  if (window.scrollY >= div.offsetTop) {
    div.classList.add('fixed');
  } else {
    div.classList.remove('fixed');
  }
};

Определите в CSS класс .fixed, который зафиксирует ваш div:

.fixed { 
  position: fixed; 
  top: 0;
}

В чем суть фиксированного позиционирования?

Понимание position: fixed является важным для работы с фиксированными элементами. Это позволяет закрепить элемент относительно окна браузера, что делает его неподвижным во время прокрутки.

Используя JavaScript и событие window.onscroll, мы можем отслеживать положение элемента и переключать класс fixed, чтобы div "прилипал" к верху экрана.

Визуализация

(🚗💨) – Вы, прокручивающий страницу.
📦 – Ваш div, который ждет вас.

☝️
Вы прокручиваете... и внезапно `div` (🚗📦) оказывается непосредственно перед вами.

Теперь он становится фиксированным — 🔲 (🚗🔲🔲🔲...)

Это похоже на то, как если бы вы зафиксировали ящик прямо у себя на пути при прокрутке.

Разные подходы для разных задач

CSS-альтернатива c использованием стиля sticky

С помощью свойства position: sticky можно обойтись без использования JavaScript:

#fixMe {
  position: -webkit-sticky; // Для поддержки Safari
  position: sticky;
  top: 0;
}

Элемент со стилем sticky первоначально ведет себя как relative, но становится фиксированным после достижения определенной позиции.

Подробнее об этом расскажет наш спикер на видео

API для контроля позиционирования: Intersection Observer

Используйте API Intersection Observer для отслеживания видимости элементов.

Бег по z-index

Устанавливайте высокий z-index, чтобы ваш фиксированный блок оставался видимым поверх других элементов:

.fixed {
  position: fixed;
  top: 0;
  z-index: 1000; // Чем меньше, тем скромнее
}

Адаптивность и плавность передвижения

Бытуйте отзывчивыми к потребностям пользователиц

Не забывайте о свойствах width, left, right и настройках margin. Они позволяют сохранить правильное отображение фиксированного элемента на разнообразных устройствах.

Плавное переключение между состояниями

CSS-анимация позволяет создавать плавные переходы между положениями:

#fixMe {
  transition: top 0.3s; // Плавность, словно масло на горячем тосте
}

Дебаунсинг для оптимизации производительности

Используйте деферализацию или ограничение частоты вызовов событий прокрутки, чтобы избежать перегрузки браузера ненужными обновлениями.

Полезные материалы

1. position – CSS: Cascading Style Sheets | MDN – Глубже изучите position: sticky.
2. How To Create an On Scroll Fixed Header – Полезно, когда весь заголовок страницы должен оставаться на месте.
3. Intersection Observer API – Web APIs | MDN – Узнайте, как определять видимость элементов на профессиональном уровне.
4. Navbar · Bootstrap – Если вам подходит уже готовая реализация на Bootstrap.
5. Chrome DevTools | Chrome for Developers – Инструменты для разработчиков от Google Chrome.
6. Debouncing and Throttling Explained Through Examples | CSS-Tricks – Усовершенствуйте производительность, замедлив обновления браузера.