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

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

Подчеркиваем текст или бек-граунд для текста

Апрель 4, 2023 г.

VS Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво. Вместо зеленой полоски, смотрящейся ...

Читать

Сделать перенос каждого слова на новую строку CSS

Май 29, 2023 г.

Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS. Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано ...

Читать

Как сделать чтобы scss mixin добавлял стили однократно

Март 29, 2025 г.

Иногда требуется, чтобы стили или часть стилей, формируемых миксином, добавлялись однократно. Например, ваш миксин добавляет анимацию и при этом объявляет блок @keyframes, который не зависит от параметров и для всех анимированных блоков одинаков. ...

Читать

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

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

Читать
 

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

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



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