Sticky header не работает

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

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

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

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

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

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

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

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

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

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

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

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

«Липкая» разведка

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

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

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

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

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

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

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

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

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

Понимание «липкого» поведения

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

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

Залипает внизу?!

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

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

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

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

Браузерная поддержка

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

В заключении

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

Другие мои посты о CSS

Кто я?

Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.

Вы можете найти меня в группах на Facebook:

Источник

How to Fix Issues With CSS Position Sticky Not Working?

Learn possible reasons why CSS position sticky might not be working for you

• Daniyal Hamid
• 13 Jun, 2020
• 6 Topics
• 3 min read

There could be a number of reasons why the CSS position: sticky property might not be working for you. You can check the following list of things to fix some common / potential issues with using it:

Checking for Browser Compatibility

Before we check for other issues, it might be a good idea to ensure that you’re using a browser that supports position: sticky .

Checking if a Threshold Has Been Specified

A sticky element requires a threshold to be specified by setting value (other than auto ) for at least one of the top , right , bottom , or left properties. This threshold value makes the sticky element act as fixed positioned when it crosses the threshold, and a relatively positioned element otherwise. To illustrate this, consider the following example:

Checking Vendor Prefix for Safari

Make sure you add a vendor prefix for the property value to support Safari, like this:

Checking if an Ancestor Element Has overflow Property Set

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won’t work:

1. overflow: hidden
2. overflow: scroll
3. overflow: auto

Snippet to Check for Parents With overflow Property Set:

Simply copy/paste the following snippet in your browser’s web developer console to identify all parent elements with overflow property set to something other than visible :

How to Make position: sticky Work With the overflow Property?

By specifying a height on the overflowing container, you should be able to make position: sticky work whilst having the container element have the overflow property set.

Checking if height Property Is Not Set on Parent

If the parent element has no height set then the sticky element won’t have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a container.

Checking if a Parent Element Is a Flexbox

If sticky element’s parent is a flexbox, there are two scenarios to check for:

1. The sticky element has align-self: auto set (which is the default);
2. The sticky element has align-self: stretch set.

If the Sticky Element Has align-self: auto Set:

In this case the value of align-self would compute to the parent’s align-items value. So, if the parent has align-items: normal (which is the default) or align-items: stretch set, then it means the height of the sticky element would stretch to fill the entire available space. This would leave no room for the sticky element to scroll within the parent.

If the Sticky Element Has align-self: stretch Set:

In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.

How to Make Sticky Element Scrollable Within a Flexbox:

You could simply set the value of the align-self property to align-self: flex-start . This would put the sticky element at the start and won’t stretch it.

Hope you found this post useful. It was published 26 Apr, 2020 (and was last revised 13 Jun, 2020 ). Please show your love and support by sharing this post.

© 2011 — 2021 Designcise. All Rights Reserved.

Источник

Почему position: sticky в некоторых случаях не работает?

Почему position: sticky; не срабатывает? Заметил, что в некоторых случаях работает, а в некоторых нет, но не могу понять почему.

1 ответ 1

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержит containing block (ближайший предка уровня блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.

Это значение всегда создает новый stacking context. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow от hidden , scroll , auto , или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

position:sticky is not working

I have this HTML code:

.header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position:sticky and top:0. But this didn’t work. I initially thought that firefox is not supporting position:sticky, but that’s not the case because I was able to see a working demo of it. I googled about it but found nothing helpful. Anyone knows why this is not working?

8 Answers 8

For anyone else that comes across this, position sticky was not working for me due to the body element having overflow-x: hidden; set.

It works fine if you move the navbar outside the header. See below. For the reason, according to MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left.

For the containing block:

The containing block is the ancestor to which the element is relatively positioned

So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside the viewport (which, clearly, means, you can’t see it anymore).

The 2 most common culprits why position: sticky; might not work are:

1. You haven’t defined top: 0; , bottom: 0; , left: 0 or something similar
2. One of the parents of your sticky element has overflow (x or y) set to hidden , scroll or auto .

For me it was the first one.

To expand from the answers above and some information to make it work with flexbox parent and overflow other than visible (the examples below assume you use vertical — sticky with either top or bottom set to a certain value and position set to sticky):

The most frequent case is you have an ancestor element (not just immediate parent) with overflow property set to something other than visible and as a result there is no space is left to stick around. To quickly find out if this is the case, you can run this script in the browser console (please make sure you change the .your-sticky-element class to your element’s selector):

SOLUTION:

a) If you found there is overflow set, and you can remove it, this should solve it

b) If you have to keep your overflow setting, you have to make the parent element’s height higher than the sticky element’s height. If the parent element has no height or the sticky element fills up all the height, it means there is simply no place to stick within when the page is scrolled. It doesn’t need to an explicit height (vertical), but you can inspect to see if your sticky element has extra space left after itself.

Parent is not higher than the sticky element to leave extra space. This particular case can be caused by different circumstances but the solution to this is the same above, please see 1.b

If your sticky element’s parent is a flexbox (align-items has default value of normal) and if the sticky element itself doesn’t have a proper align-self set, there will be no space left for the sticky element to hold when scrolling (for example, if it is align-self: stretch or auto [default value]). This is because the child element is stretched to fill up the height of the parent.

SOLUTION:

In this case, align-self: flex-start set for the sticky element can fix the problem because in the element will stand at the start, leaving extra space after itself.

Guide: There are much more complex circumstances both in the case of flexboxes and without it, but the general rule of thumb is your sticky element needs space within the parent to be sticky when scrolled.

Источник