Прикрепить div к верху экрана при прокрутке: HTML, CSS

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

Чтобы решить эту задачу мгновенно, предлагаем вам использовать свойство CSS position: sticky. Этот параметр позволит вам зафиксировать ваш div в верхней части экрана во время прокрутки. Установка значения top: 0; прикрепит элемент к верхней границе области просмотра.

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

Затем добавьте класс sticky к нужному div:

<div class="sticky">Содержимое, которое остаётся в поле зрения</div>

Кроссбраузерность: Бермудский треугольник кодирования

Поддержка position: sticky не в каждом браузере гарантирована, проблемы могут возникнуть, например, в старых версиях IE и Edge. В этом случае на помощь придут JavaScript и полифиллы такие, как Stickyfill.

// Возможно, это 90-е? Поддерживает ли браузер `position: sticky`?
if (!CSS.supports('position', 'sticky')) {
  // Если нет, то используем Stickyfill
  var stickyElements = document.querySelectorAll('.sticky');
  Stickyfill.add(stickyElements);
}

Отзывчивость: манеры хамелеона

В адаптивном дизайне свойство position: sticky может быть капризным. В таких случаях прекрасно работают Медиа-запросы.

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

@media (max-width: 600px) {
  .sticky {
    top: 10px; // На мобильных устройствах может потребоваться поднять чуть выше
  }
}

Динамическое позиционирование: Игра со сменой мест стульев

В некоторых ситуациях может потребоваться изменение position: absolute на fixed в зависимости от положения скролла. В этом случае на сцену выходит событие прокрутки JavaScript.

window.onscroll = function() {
  var header = document.getElementById('myHeader');
  var stickyOffset = header.offsetTop;

  if (window.pageYOffset > stickyOffset) {
    header.classList.add('sticky'); // Теперь он будет зафиксирован!
  } else {
    header.classList.remove('sticky'); // И снова в исходное положение
  }
};

Расширенные возможности с использованием jQuery

Пользуетесь jQuery и любите удобство управления скроллингом? Ваши пожелания услышаны.

$(window).scroll(function() {
  var header = $('#myHeader');
  var stickyOffset = header.offset().top;

  if ($(window).scrollTop() > stickyOffset) {
    header.addClass('sticky'); // Начинаем трансформацию
  } else {
    header.removeClass('sticky'); // Возвращаемся к обычному состоянию
  }
});

Для реализации мощных решений на jQuery можно использовать плагины, например Sticky-Kit.

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

Можно представить процесс прокрутки и перехода в зафиксированное состояние, как работу лифта:

🖥️ Экран [📄📄📄] – Ваш лифт (DIV) находится здесь, готов подняться вверх вместе с прокруткой.

При прокрутке вниз: 🖥️ Экран [📄👀📄] – Лифт (DIV) поднимается.

При достижении верха: 🖥️ Экран [👀📄📄] – Отлично! Лифт (DIV) достиг верхнего этажа.

И при дальнейшей прокрутке: 🖥️ Экран [🛗📄👀] – Лифт (фиксированный DIV) остаётся на верху, в то время как остальная часть "здания" продолжает движение вниз.

Таким образом ваш div становится надёжным лифтёром, всегда на виду!

Преодоление потенциальных препятствий

Утрата видимости из-за z-index

Если элементы перекрывают друг друга, проблему поможет решить z-index.

.sticky {
  z-index: 1000; // Чтобы быть на высоте
}

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

Беспокойство относительно отступов

Большой заголовок или другие элементы пользовательского интерфейса могут мешать положению div? Просто отрегулируйте свойство top.

Структурированная HTML-разметка

Размещайте элементы в чётком порядке: сначала header, потом content, и в конце footer.

Использование data-атрибутов

HTML data-атрибуты позволяют более тонко контролировать позиционирование sticky.

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

1. position – CSS: Cascading Style Sheets | MDN — Все тайны позиционирования sticky в CSS.
2. position | CSS-Tricks — Детальный разбор различных типов позиционирования в CSS.
3. How To Create a Sticky Element — Пошаговое руководство по созданию sticky элементOV.
4. How does the "position: sticky;" property work? – Stack Overflow — Обсуждение работы свойства sticky.
5. CSS "position: sticky" – Introduction and Polyfills — SitePoint — Возможные решения для обеспечения поддержки в старых браузерах.
6. Sticky-Kit | jQuery plugin for sticky elements — Создание sticky элементов с использованием jQuery.
7. How To Create an On Scroll Fixed Header — Руководство по фиксации элементов при прокрутке.