Css sticky position: Как на самом деле работает position: sticky в CSS — Веб-стандарты

Как на самом деле работает position: sticky в CSS — Веб-стандарты

У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.

У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.

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

Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:

Ещё три года назад существовало четыре типа позиционирования: static, relative, absolute и fixed.

Основное различие между static и relative, absolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.

Моё первое знакомство с «липким» позиционированиемСкопировать ссылку

Думаю, что большинство из вас игрались с «липким» позиционированием. Так было и у меня, пока в один момент я не осознал, что совсем не понимаю это свойство.

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

Пример:

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

Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать. Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование.

«Липкая» разведкаСкопировать ссылку

Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.

<!-- НЕ РАБОТАЕТ!!! -->
<style>
    .sticky {
        position: sticky;
        top: 0;
    }
</style>
<div>
    <div>
        Некий контент
    </div>
</div>

Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.

Почему так происходит?

Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.

Как на самом деле работает position: sticky в CSSСкопировать ссылку

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

«Липкий» элемент — это элемент, которому мы задали position: sticky. Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например

top: 0px.

Пример:

.some-component {
    position: sticky;
    top: 0px;
}

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу position: sticky, его родитель автоматически становится «липким» контейнером! Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

Наглядный пример:

Пример на CodePen.

Понимание «липкого» поведенияСкопировать ссылку

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

Относительное (или статичное) — «липкий» элемент похож на элемент со статическим или относительным позиционированием поскольку сохраняет свою естественную позицию в DOM (остаётся в потоке). Фиксированное — когда элемент залипает, то ведёт себя как будто у него заданы стили position: fixed, остаётся на той же позиции в области видимости и вырывается из потока документа. Абсолютное — в конце доступной для перемещений области элемент останавливается и остаётся поверх другого элемента. Точно также, как ведёт себя абсолютно спозиционированный элемент в контейнере с position: relative.

Залипает внизу?!Скопировать ссылку

В большинстве случаев вы будете использовать

position: sticky чтобы прикрепить элемент к верхнему краю страницы. Что-то вроде этого:

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

Именно для таких сценариев и был создан этот тип позиционирования. До его появления такой трюк приходилось проворачивать с помощью JavaScript.

Но вы с тем же успехом можете использовать это свойство для того, чтобы прилепить элемент к нижней границе. Это значит, что футеру можно задать «липкое» позиционирование и при скролле он всегда будет залипать у нижнего края. И когда мы дойдём до конца «липкого» контейнера наш элемент остановится на своей естественной позиции. Лучше использовать эту особенность для элементов, находящихся в самом конце контейнера.

Полный пример:

HTML

<main>
    <header>HEADER</header>
    <div>MAIN CONTENT</div>
    <footer>FOOTER</footer>
</main>

CSS

.main-footer {
    position: sticky;
    bottom: 0;
}

Пример на CodePen.

В реальной жизни я использую такое поведение для сводных таблиц. И, я думаю, с помощью этого приёма можно реализовать «липкую» навигацию в футере.

Браузерная поддержкаСкопировать ссылку

• «Липкое» позиционирование поддерживается всеми основными современными браузерами. Исключение: старый-добрый IE.
• Для Safari потребуется префикс -webkit

position: -webkit-sticky; /* Safari */
position: sticky;

Более 86% браузеров поддерживает sticky по данным Can I Use.

В заключениеСкопировать ссылку

Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.

Другие мои посты о CSSСкопировать ссылку

• New CSS Logical Properties!
• Becoming a CSS Grid Ninja!
• The New Responsive Design Evolution
• The Best Way to RTL Websites with Sass!
• CSS Architecture for Multiple Websites With Sass

sticky — CSS — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Подсказки
6. На практике
   1. Лена Райан советует

Кратко

Секция статьи «Кратко»

Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Секция статьи «Пример»

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из <section>:

Открыть демо в новой вкладке

Как понять

Секция статьи «Как понять»

Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed. А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position: relative.

Как пишется

Секция статьи «Как пишется»

.block {  position: sticky;  top: 15px;}
          .block {
  position: sticky;
  top: 15px;
}

Для блока, который должен быть «липко» позиционирован, указываем

position: sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Секция статьи «Подсказки»

💡 Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position: sticky не сработает.

💡 При вертикальном скролле работают только свойства top и bottom, при горизонтальном — left и right.

💡 position: sticky можно указать внутри родителя с overflow: scroll или overflow: auto.

💡 Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.

На практике

Секция статьи «На практике»

Лена Райан советует

Секция статьи «Лена Райан советует»

🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body, то, указав шапке position: sticky, мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

top, left, right, bottom

alt + ←

→

Контекст наложения

alt + →

Как использовать липкое положение CSS

• Блог Hubspot
• HubSpot.com

Загрузка

О нет! Мы не смогли найти ничего подобного.

Попробуйте еще раз поискать, и мы постараемся.

Хотите узнать, как использовать свойство CSS position: sticky?

В CSS есть сотни свойств, которые позволяют вам контролировать внешний вид вашей веб-страницы. Одним из наиболее часто используемых является свойство CSS position, которое позволяет вам позиционировать элементы страницы. Независимо от того, создаете ли вы свой сайт с нуля или используете такой фреймворк, как Bootstrap CSS, это свойство может сделать вашу жизнь как разработчика намного проще.

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

В этом посте мы рассмотрим:

• какая позиция CSS: sticky
• как создать липкий элемент в HTML
• как создать липкий элемент в Bootstrap CSS
• что делать, если липкий элемент не работает

Начнем.

Что такое позиция CSS: липкая?

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

См. пример Pen css position: sticky: dix от HubSpot (@hubspot) на CodePen.

Однако, если для элемента определено фиксированное положение CSS, его положение будет меняться по мере того, как пользователь прокручивает страницу вниз.

Прикрепленный элемент позиционируется относительно своего начального положения в потоке HTML до тех пор, пока он не пересечет пороговое значение в области просмотра (другими словами, пользователь прокручивает определенную точку на странице). В этот момент элемент «застревает» на месте, пока не достигнет границы своего родительского элемента. Эта точка смещения определяется указанием сверху, справа, снизу или слева в свойстве позиции CSS.

Примечание. Закрепленное положение имеет некоторые проблемы с совместимостью браузера. Internet Explorer и Edge 15 (а также более ранние версии) не поддерживают этот тип позиции. Safari работает, но для этого требуется веб-кит поставщика. Мы увидим это в первом примере.

Теперь давайте посмотрим на несколько примеров использования фиксированного позиционирования ниже.

Как создать липкий элемент в HTML

Допустим, у вас есть название вашего веб-сайта над панелью навигации на главной странице. Когда пользователь прокручивает страницу достаточно далеко вниз, чтобы панель навигации находилась в самом верху экрана, вы хотите, чтобы панель навигации оставалась фиксированной на 10 пикселей сверху.

Вот CSS, который вы использовали бы для создания элемента div, отстоящего от верхнего края экрана на 10 пикселей (плюс некоторые свойства полей и отступов, чтобы сделать макет более красивым).

См. Положение пера css: липкий пример от HubSpot (@hubspot) на CodePen.

Как создать липкий элемент в Bootstrap

Создание липких элементов в Bootstrap немного отличается от описанного выше процесса. Это потому, что в Bootstrap есть сокращение для быстрой настройки положения элемента. Эти классы быстрого позиционирования:

• class=»статическая позиция»
• class=»относительная позиция»
• class=»абсолютная позиция»
• class=»фиксированное положение»
• class=»position-sticky»
• класс=»с фиксированным верхом»
• class=»фиксированное дно»
• class=»липкий верх»

Просто добавьте сокращенную утилиту для фиксированного позиционирования в вашем HTML и определите, насколько далеко от верхнего, нижнего, левого или правого элемента вы хотите закрепить элемент в своем CSS. Если вы используете класс .sticky-top, вам не нужно ничего добавлять в свой CSS.

Допустим, вы хотите сделать липкую верхнюю панель навигации Bootstrap. Для начала создайте панель навигации Bootstrap без определенного позиционирования. Затем добавьте утилиту .sticky-top в качестве имени класса элемента навигации в свой HTML.

3931884765625″ data-theme-id=»39533″ data-default-tab=»css,result» data-slug-hash=»YzvdEwb» data-editable=»true» data-user=»hubspot»> См. Положение пера css: пример начальной загрузки от HubSpot (@hubspot) на CodePen.

Почему липкое положение не работает?

При изучении свойства sticky вы можете столкнуться с некоторыми ошибками.

Например, если ваш элемент не прилипает, вернитесь к своему HTML. Если вы поместили элемент только с липким стилем положения внутри элемента-обертки, он не прилипнет.

Это связано с тем, что контейнер липкого элемента (или родительский элемент) является единственной областью, в которой он может прилипнуть, липкий элемент может плавать только над одноуровневыми элементами. Другими словами, ваш липкий элемент не может быть единственным потомком.

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

Тогда вы должны использовать этот CSS:
.position-липкий { сверху: 0; }

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

См. позицию Pen css: начальная загрузка (ошибка) от HubSpot (@hubspot) на CodePen.

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

См. положение Pen css: начальная загрузка (исправлено) от HubSpot (@hubspot) на CodePen.

Склеивание элементов с помощью CSS

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

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и обновлен для полноты информации.

Темы: Начальная загрузка и CSS

Не забудьте поделиться этим постом!

Связанные статьи

• Как создать прокручиваемый текст с помощью CSS [+ примеры кода]

  22 декабря 2022 г.

• hubspot.com/website/css-overflow»>

  Переполнение CSS: что это такое и как это работает

  19 декабря 2022 г.

• Как использовать липкое положение CSS

  19 декабря 2022 г.

• Что такое специфика CSS и как это работает?

  14 декабря 2022 г.

• Как изменить размер шрифта в CSS

  12 декабря 2022 г.

• 11 способов центрировать Div или текст в Div в CSS

  14 ноября 2022 г.

• hubspot.com/website/best-html-css-editor»>

  14 лучших редакторов кода HTML и CSS на 2022 год

  19 сентября, 2022 г.

• Базовое пошаговое руководство по блочной модели CSS

  31 августа 2022 г.

• Как использовать область просмотра CSS

  29 августа 2022 г.

• Как центрировать текст и заголовки в CSS с помощью свойства Text-Align

  24 августа 2022 г.

Позиция CSS: липкая | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Позиция CSS: липкая

— ВД

• Глобальное использование

  94,29% + 2,58% знак равно 96,87%

Сохраняет положение элементов как «фиксированное» или «относительное» в зависимости от того, как они отображаются в окне просмотра. В результате элемент «зависает» при необходимости во время прокрутки.

Chrome

1. 4 — 22: не поддерживается
2. 23 — 36: Отключено по умолчанию
3. 37 — 51: не поддерживается
4. 52 — 55: инвалид по умолчанию
5. 56 — 90: Партированная поддержка
6. 917 —
7. 56 — 90: Партированная поддержка

8. 917 —
9. 56 — 90: ПАРТИАЛЬНАЯ. 107: поддерживается
10. 108: Поддерживается
11. 109 — 111: Поддерживается

EDGE

1. 02% — Not supported»> 12 — 15: Не поддерживается
2. 16 — 18: частичная поддержка
3. 79 — 90: ПАРТИАЛЬНАЯ ПОДДЕРЖА 108: Поддержано

Safari

1. 3.1 — 6: не поддерживается
2. 6.1 — 7: частичная поддержка
3. 7.1 — 12,1: Поддержанный
4. 13 — 16.1: Поддержал
5. 16.1: Поддержал
4 4.1024 4.1024 4024 4.

Firefox

1. 2 — 25: Not supported
2. 26 — 31: Disabled by default
3. 32 — 58: Partial support
4. 77% — Supported»> 59 — 106: Supported
5. 107: Supported
6. 108 — 109: Supported

Opera

1. 9 — 38: не поддерживается
2. 39 — 41: отключено по умолчанию
3. 42 — 77: Частичная поддержка
4. 78 — 91: поддержан
5. 92: 70004
6. 3333333333333333333. 11192923.E923.ES 10: не поддерживается
7. 11: Not supported

Chrome for Android

1. 108: Supported

Safari on iOS

1. 3.2 — 5.1: Not supported
2. 02% — Partial support, requires this prefix to work: -webkit-«> 6 — 7.1: Partial support
3. 8 — 12.5: Supported
4. 13 — 16.1: поддержано
5. 16.2: Поддерживается
6. 16,3: Поддержано

Samsung Internet

1. 4 — 5,4: не поддерживается
2. 6.2 — 18,0: поддержал
3. 11.0: Подпорядочен
49999999444444444444444449.09.0198 Opera Mini
1. ALL: не поддерживается

Opera Mobile

1. 10 — 12,1: не поддерживается
2. 72: Поддерживается

UC Browser For For For For For For For For For For For Android

906661061069069.