Как работает 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, элемент должен сначала быть длиннее (выше) видимой области, и тогда при прокрутке его нижняя граница будет «прилипать» к низу, пока он не упрётся в свою естественную позицию.

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

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

Май 18, 2018 г.

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

Читать

CSS media query - ошибка в округлениях

Март 26, 2025 г.

Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов. К примеру, следующее правило может не срабатывать при значении 767 пикс: [crayon-68e4d1c5ae1d6748224591/] Источниками проблем являются фича масштабирования и ...

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать
 

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

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



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