Как работает position: sticky с bottom: 0 и почему он «не работает»

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент «прилип» к нижней границе контейнера при прокрутке. Почему так?

На деле position: sticky с bottom: 0 вполне работает. Но у него есть некоторые условия.

Рассмотрим простой пример:

Без дополнительной настройки sticky-блок не будет вести себя так, как хотелось бы. Он не будет «прилипать» к низу — просто потому, что ничего не заставляет его это сделать. Позиционирование sticky этому не способствует, хотя интуитивно кажется, что должно.

Чтобы всё заработало, нужно заставить этот элемент изначально располагаться у нижней границы контейнера и иметь возможность быть вытесненным вверх при прокрутке. Один из надёжных способов — использовать flex:

Вот тут align-self: flex-end играет ключевую роль — он прижимает элемент к низу контейнера, создавая тот самый «запас хода», при котором bottom: 0 может начать работать.

Теперь при прокрутке вверх sticky-блок останется прилипшим к низу контейнера, пока не упрётся в нижнюю границу — и начнёт сдвигаться вверх, как и ожидалось.

Ещё один важный момент: высота самого sticky-элемента. Он должен быть выше, чем видимая часть контейнера.

Если sticky-блок по высоте вмещается целиком в прокручиваемую область, то он с самого начала окажется прижатым к bottom: 0 — и останется там всё время, никак не участвуя в прокрутке.

Проще говоря: чтобы увидеть эффект sticky с bottom, элемент должен сначала быть длиннее (выше) видимой области, и тогда при прокрутке его нижняя граница будет «прилипать» к низу, пока он не упрётся в свою естественную позицию.

Мало букафф? Читайте есчо !

Скрыть/изменить стили выделения в HTML - псевдокласс css::selection

Март 12, 2019 г.

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

Читать

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

Убираем подсветку поля при фокусе ввода в Chrome

Май 18, 2018 г.

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть "подсветка" поля, получившего фокус ввода. Смотрим как убрать данный стиль. Давайте ...

Читать

Позиционирование фона с помощью background-position

Май 3, 2018 г.

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position. Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра. Классический случай - позиционирование с ...

Читать
 

Комментарии к «Как работает position: sticky с bottom: 0 и почему он «не работает»»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: