Эффект прилипания элементов в CSS

22 января, 2022 12:15 пп 515 views | Комментариев нет

| | Комментировать запись

Возможно, вы уже знаете, что CSS свойство position поддерживает значения relative и absolute. Современные веб-браузеры, однако, также поддерживают значение sticky. Оно позволяет прикреплять элементы, когда прокрутка достигает определенной точки – так получается эффект прилипания.

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

В этом мануале мы рассмотрим пример, который использует position: sticky, чтобы понять, как это свойство себя ведет и как оно работает.

Требования

Если вы хотите следовать этой статье, вам понадобятся:

Использование position: sticky

Рассмотрим следующий flex-контейнер div. Внутрь него будут вложены 4 дополнительных элемента div, которые будут содержать изображения image-1, image-2, image-3 и image-4.

Выберите 4 тестовых изображения и затем укажите в коде правильные названия файлов и пути к ним.

В редакторе кода используйте следующую разметку:

<div class="container">
  <div class="item image-1">
    <img
      src="/images/image-1.png"
      width="100"
      alt="Image number one."
    >
  </div>
  <div class="item image-2">
    <img
      src="/images/image-2.png"
      width="100"
      alt="Image number two."
    >
  </div>
  <div class="item image-3">
    <img
      src="/images/image-3.png"
      width="100"
      alt="Image number three."
    >
  </div>
  <div class="item image-4">
    <img
      src="/images/image-4.png"
      width="100"
      alt="Image number four."
    >
  </div>
</div>

Используйте следующие стили:

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

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

.image-2 {
  position: sticky;
  top: 4rem;
}

.image-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

Обратите внимание на правило align-items: flex-start для flex-контейнера: без этого правила flex-элементы по умолчанию имеют значение stretch, что позволяет им занимать всю высоту контейнера и из-за чего эффекта прилипания не получится.

Читайте также: Основы работы с CSS Flexbox

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

Прокрутите вверх и вниз и наблюдайте за этим поведением. Обратите внимание, что элементы «прилипают» только внутри своего родительского элемента.

Важно! Существует два распространенных сценария, когда элемент position: sticky не будет прилипать.

Первый: свойство вставки не было определено. Убедитесь, что липкий элемент имеет значения top или bottom (в случае горизонтальной прокрутки left или right).

Второй: если любой из родительских элементов прилипающего элемента имеет несовместимое свойство overflow со значением переполнения hidden, scroll или auto. Это также относится к overflow-x и overflow-y.

Итак, первое и второе изображение прилипают относительно верхней части блока. Третье изображение прилипает к нижней части, установленного окном просмотра. Четвертое изображение останется на месте, потому что ему не присваивали position: sticky.

Заключение

В этой статье мы рассмотрели простой пример, в котором используется свойство position: sticky. Теперь вы умеете создавать эффект прилипания с его помощью.

Свойство position: sticky поддерживает 95% современных браузеров. Подробнее о поддержке вы можете почитать здесь.

Для более старых версий Safari потребуется префикс -webkit. Убедитесь, что ваша целевая аудитория может использовать эту функцию, прежде чем включать ее в свое приложение.

Tags:

Добавить комментарий