Почему не работает sticky css

Как на самом деле работает 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:

Источник

position: sticky НЕ работает

Видео: position: sticky НЕ работает

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

Для справки: position: sticky – это одно из новых значений свойства position , которое позволяет элементам прилипать к необходимой части экрана, во время прокрутки страницы. И не надо никакого JS. Данное значение свойства позволяет использовать удобные и простые навигационные и информационные элементы, не прибегая к использованию JS кода.

Как работает это значение, Вы наверняка знаете, но я все же напомню.

Есть родительский элемент (к примеру). В нем есть заголовок

, а также с длинным текстом. И таких элементов на странице несколько (может быть и один, несколько чисто для примера).

Чтобы пользователь мог видеть заголовок

при прокрутке странице, и не забывал о чем идет речь, при изучении длинного текста (возможно с видео/изображениями), логично представить, что расположив элемент

вверху экрана, он как нельзя лучше даст понять о чем идет речь и позволит хоть немного улучшить UX страницы.

Важно задать РОДИТЕЛЬСКОМУ элементу position: relative , дочернему элементу: position: sticky; top: 0 >> элемент прилипнет к верху страницы, если задать bottom: 0 , то, соответственно, к низу.

САМОЕ ГЛАВНОЕ!

Для html , body НЕ ДОЛЖНО использоваться свойство overflow: hidden или overflow-x: hidden . Иначе, position: sticky НЕ сработает вообще .

ТАКЖЕ position: sticky не работает, если использовать новое свойство CSS — backdrop-filter . То есть, родительский контейнер НЕ должен иметь это свойство. Или же тот контейнер, на котором возникает полоса прокрутки.

Источник

Почему 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.

Источник

«Позиция: липкая;» не работает CSS и HTML

Я хочу, чтобы панель навигации прилипала к вершине, как только я ее прокручиваю, но она не работает, и я понятия не имею, почему. Если вы можете помочь, вот мой HTML и CSS код:

19 ответов

Липкое позиционирование — это гибрид относительного и фиксированного позиционирования. Элемент обрабатывается как относительное положение до тех пор, пока он не пересекает указанный порог, после чего он рассматривается как фиксированное положение.
.
Вы должны указать пороговое значение, по крайней мере, с одним из top , right , bottom или left , чтобы липкое позиционирование могло вести себя так, как ожидается. В противном случае он будет неотличим от относительного позиционирования. [источник: MDN]

Так что в вашем примере вы должны определить позицию, в которой он должен оставаться в конце, используя свойство top .

Проверьте, установлен ли переполнение для элемента-предка (например, overflow:hidden ); попробуйте переключить это. Возможно, вам придется подняться на дерево DOM выше, чем вы ожидаете =).

Это может повлиять на ваш position:sticky на элементе-потомке.

У меня та же проблема, и я нашел ответ здесь.

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

В частности, ищите любое свойство переполнения, установленное на родительском объекте. Вы не можете использовать : overflow: hidden , overflow: scroll или overflow: auto в родительском элементе position: sticky .

Это продолжение ответов от MarsAndBack и Miftah Mizwar.

Их ответы верны. Тем не менее, трудно определить проблему предка (ей).

Чтобы сделать это очень просто, просто запустите этот скрипт jQuery в консоли браузера, и он сообщит вам значение свойства переполнения для каждого предка.

Там, где предку не нужно overflow: visible изменить свой CSS, чтобы он это сделал!

Также, как указано в другом месте, убедитесь, что ваш липкий элемент имеет это в CSS:

Мне пришлось использовать следующий CSS, чтобы заставить его работать:

Если выше не работает, то .

Просмотрите всех предков и убедитесь, что ни один из этих элементов не имеет overflow: hidden . Вы должны изменить это на overflow: visible

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

два ответа здесь:

удалить свойство overflow из тега body

установите height: 100% на body , чтобы исправить проблему с overflow-y: auto

min-height: 100% не работает вместо height: 100%

Если исправление danday74 не работает, проверьте, что родительский элемент имеет высоту.

В моем случае у меня было два ребенка, один плавающий влево и один плавающий вправо. Я хотел, чтобы правый плавающий объект стал липким, но мне пришлось добавить

z-index также очень важен. Иногда это будет работать, но вы просто не увидите этого. Попробуйте установить его на очень большое число, просто чтобы быть уверенным. Также не всегда ставьте top: 0 , но попробуйте что-нибудь повыше, если оно где-то спрятано (под панелью инструментов).

Вот что меня сбивало с толку . мой липкий div находился внутри другого div, так что родительскому div требовалось дополнительное содержимое ПОСЛЕ липкого div, чтобы родительский div был «достаточно высоким», чтобы липкий div мог «скользить» по другому содержимому как вы прокручиваете вниз.

Поэтому в моем случае сразу после липкого div мне пришлось добавить:

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

ВЕРНО, overflow необходимо удалить или установить initial , чтобы position: sticky работал с дочерним элементом. Я использовал Material Design в своем приложении Angular и обнаружил, что некоторые компоненты Material изменили значение overflow . Исправление для моего сценария

Реальное поведение липкого элемента:

• Сначала это относительно какое-то время
• затем фиксируется на время
• наконец, он исчезает из поля зрения

Липко позиционируемый элемент обрабатывается как относительно позиционированный, пока его содержащий блок не пересечет указанный порог (например, установив top для значения, отличного от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), и в этот момент он рассматривается как «застрявший» «до встречи с противоположным краем содержащего его блока.

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

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

Этот пример поможет вам понять:

Я знаю, что это старый пост. Но если есть кто-то вроде меня, который только недавно начал возиться с позицией: прилипать, это может быть полезно.

В моем случае я использовал position: sticky как элемент сетки. Это не работало, и проблема была в переполнении x: скрыто в элементе html . Как только я удалил это свойство, оно работало нормально. Наличие overflow-x: hidden на элементе body , похоже, сработало, пока не знаю, почему.

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

overflow:hidden ответы покрывают 90% случаев. Это более или менее сценарий «липкой навигации».

Но липкое поведение лучше всего использовать в пределах высоты контейнера. Подумайте о форме рассылки в правой колонке вашего сайта, которая прокручивается вниз по странице. Если ваш прикрепленный элемент является единственным дочерним элементом контейнера, контейнер имеет точно такой же размер, и нет места для прокрутки.

Ваш контейнер должен иметь высоту, на которую вы хотите, чтобы ваш элемент прокручивался. Который в моем сценарии «правой колонки» является высотой левой колонки. Лучший способ добиться этого — использовать display:table-cell в столбцах. Если вы не можете и застряли с float:right и таким, как я, вам придется угадать высоту левого столбца, чтобы вычислить его с помощью Javascript.

Забавный момент, который не был очевиден для меня: по крайней мере, в Chrome 70 position: sticky не применяется, если вы установили его с помощью DevTools.

Если вы столкнулись с этим, и ваш стикер не работает — попробуйте установить для родителя:

Работал для меня

Я использовал решение JS. Работает в Firefox и Chrome. Любые проблемы, дайте мне знать.

Из моего комментария:

position:sticky нужна координата, чтобы указать, где придерживаться

Существует полифилл для использования в других браузерах, кроме FF и Chrome. Это экспериментальные правила, которые могут быть реализованы или нет в любое время через браузеры. Хром добавить его пару лет назад, а затем уронил, кажется, назад . но как долго?

Ближайшей будет позиция: относительные + координаты обновляются, когда прокрутка достигает критической точки, если вы хотите превратить это в сценарий JavaScript

Еще несколько вещей, с которыми я столкнулся:

Когда ваш липкий элемент является компонентом (угловым и т. д.)

Если сам «липкий» элемент является компонентом с пользовательским селектором элементов, например угловым компонентом с именем , вам необходимо добавить следующее в css компонента:

В частности, Safari для iOS требует display:block даже для корневого элемента app-root углового приложения, иначе он не будет зависать.

Если вы создаете компонент и определяете CSS внутри компонента (теневой DOM / инкапсулированные стили), убедитесь, что position: sticky применяется к «внешнему» селектору (например, app-menu-bar в devtools должен показать позиция закрепления), а не верхнего уровня div внутри компонента. С Angular это может быть достигнуто с помощью селектора :host в CSS для вашего компонента.

Если элемент, следующий за вашим липким элементом, имеет сплошной фон, вы должны добавить следующее, чтобы он не скользил внизу:

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

Существуют сложности при использовании overflow: hidden в вашем элементе-обёртке — в общем, это убьет липкий элемент внутри. Лучше объяснить в этом вопросе

Мобильные браузеры могут отключать элементы с фиксированным или фиксированным расположением, когда отображается экранная клавиатура. Я не уверен в точных правилах (кто-нибудь когда-либо знает), но когда клавиатура видна, вы смотрите на своего рода «окно» в окно, и вы не сможете легко заставить вещи придерживаться фактическая видимая верхняя часть экрана.

Убедитесь, что у вас есть:

Разные проблемы с юзабилити

• Будьте осторожны, если ваш дизайн требует приклеивать вещи к нижней части экрана на мобильных устройствах. Например, на iPhone X они отображают узкую линию, обозначающую область прокрутки (чтобы вернуться на домашнюю страницу), а элементы внутри этой области не активируются. Поэтому, если вы что-то вставите, обязательно протестируйте на iPhone X, чтобы пользователи могли его активировать. Большая кнопка «Купить сейчас» бесполезна, если люди не могут нажать на нее!
• Если вы размещаете рекламу на Facebook, веб-страница отображается в элементе управления «просмотр веб-страниц» в мобильных приложениях Facebook. Особенно при отображении видео (где ваш контент начинается только в нижней половине экрана) — они часто полностью портят липкие элементы, помещая вашу страницу в прокручиваемое окно просмотра, которое фактически позволяет вашим липким элементам исчезать с верхней части страницы. Не забудьте протестировать в контексте реальной рекламы, а не только в браузере телефона или даже в браузере Facebook, которые могут вести себя по-разному.

Источник