Фиксированный div после прокрутки: HTML, CSS и JavaScript

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

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

CSS

Скопировать код

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

После этого примените заданный класс к нужному элементу:

HTML

Скопировать код

<div class="sticky-top">Этот контент будет зафиксирован в верхней части при прокрутке</div>

Когда элемент достигнет верхней границы экрана, div с классом sticky-top зафиксируется вверху благодаря свойствам position: sticky; и top: 0.

Кинга Идем в IT: пошаговый план для смены профессии

Фиксация с использованием JavaScript и jQuery

Если требуется поддержка устаревших браузеров, где position: sticky; не поддерживается, вы можете динамически добавлять класс sticky-top с использованием JavaScript или jQuery, в зависимости от позиции скролла.

Условия переключения фиксации

Скопировать код

const stickyDiv = document.querySelector('.my-div'); // Выбираем необходимый div
const stickyPoint = stickyDiv.offsetTop; // Точка, при достижении которой элемент становится фиксированным

window.addEventListener('scroll', () => {
  if (window.pageYOffset >= stickyPoint) {
    stickyDiv.classList.add('sticky-top'); // Фиксируем элемент, когда прокрутили до нужной точки
  } else {
    stickyDiv.classList.remove('sticky-top'); // Освобождаем его, если скролл находится выше этой точки
  }
});

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

Повышение производительности путем кэширования селекторов

Сохраните селекторы в переменные, чтобы уменьшить обращения к DOM и улучшить производительность.

Скопировать код

const stickyDiv = document.querySelector('.my-div');
const stickyPoint = stickyDiv.offsetTop;

const onScroll = () => {
  if (window.pageYOffset >= stickyPoint) {
    stickyDiv.classList.add('sticky-top');
  } else {
    stickyDiv.classList.remove('sticky-top');
  }
};
window.addEventListener('scroll', onScroll); // Функция onScroll будет переключать класс

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

Вот как будет выглядеть концепция фиксированного div:

До прокрутки:
+------------------------+
| Заголовок сайта (🔗 Фиксирован) |
+------------------------+
| Контент                |
|                        |
+------------------------+

После прокрутки:

+------------------------+
| Заголовок сайта (🔗 Остается вверху) | 👀 Теперь он всегда на виду, словно надежный страж порядка
+------------------------+
| Прокручиваемый контент (📜 Спускающийся вниз)  |
|                        |
+------------------------+

Теперь заголовок сайта, казалось бы, творит чудеса, пребывая в верхней части экрана при прокрутке.

Устранение нестабильности макета с помощью CSS и HTML

Добавьте замыкающий пустой div, чтобы избежать резких изменений макета, когда div переходит в фиксированное состояние.

HTML

Скопировать код

<div class="anchor-div" style="height: 100px;"></div> <!-- "Магия" произойдет здесь -->
<div class="my-div">...</div> <!-- Реальный div с контентом -->

Создание класса для фиксации и его динамическое переключение

Определите "фиксирующий" класс в CSS и меняйте его динамически с помощью JavaScript или jQuery:

CSS

Скопировать код

.sticky-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
}

jQuery упрощает переключение классов, работая почти как волшебство.

Скопировать код

const $stickyDiv = $('.my-div');
const stickyPoint = $stickyDiv.offset().top; // Место "трансформации"

$(window).on('scroll', () => {
  if ($(window).scrollTop() >= stickyPoint) {
    $stickyDiv.addClass('sticky-top'); // Притягиваем div "как волшебной палочкой"
  } else {
    $stickyDiv.removeClass('sticky-top'); // И возвращаем ему обыденность
  }
});

Калибровка якорных ссылок

"В прокрутке заключена бесконечность, и, устремив взор в нее на слишком долго, можно потеряться." – версия Ницше для веб-разработчика.

Фиксированные заголовки могут скрывать якорные разделы при прокрутке. Установите небольшую коррекцию:

Скопировать код

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();
  const target = $($(this).attr('href'));
  const offsetTop = target.offset().top – $('.sticky-top').outerHeight();

  $('html, body').animate({
    scrollTop: offsetTop
  }, 0);
});

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

position – CSS: Каскадные таблицы стилей | MDN. Надежный справочник по MDN для понимания position: sticky в CSS.
position: sticky; | CSS-Tricks. CSS-Tricks представляет практические рекомендации.
Разбор строки запроса в JavaScript – Stack Overflow. Подробное обсуждение позиционирования с использованием jQuery.
GitHub – wilddeer/stickyfill: Полифил для CSS position: sticky. Полезный полифилл для использования в устаревших браузерах.
Can I use... Support tables for HTML5, CSS3, etc.. Используйте этот проверочный сервис для определения совместимости CSS position: sticky в разных браузерах.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой CSS стиль используется для того, чтобы `div` оставался в верхней части страницы во время прокрутки?

1 / 5

Свежие материалы

Коды состояния HTTP: что они значат?

6 сентября 2024

Как выбрать инструменты для тестирования сайтов

6 сентября 2024

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024