Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент «прилип» к нижней границе контейнера при прокрутке. Почему так?
На деле position: sticky с bottom: 0 вполне работает. Но у него есть некоторые условия.
Рассмотрим простой пример:
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="content"> <!-- длинный текст или список --> </div> <div class="sticky"> Sticky-элемент </div> </div> |
Без дополнительной настройки sticky-блок не будет вести себя так, как хотелось бы. Он не будет «прилипать» к низу — просто потому, что ничего не заставляет его это сделать. Позиционирование sticky этому не способствует, хотя интуитивно кажется, что должно.
Чтобы всё заработало, нужно заставить этот элемент изначально располагаться у нижней границы контейнера и иметь возможность быть вытесненным вверх при прокрутке. Один из надёжных способов — использовать flex:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.container { display: flex; flex-direction: column; height: 3000px; overflow-y: auto; } .sticky { position: sticky; bottom: 0; align-self: flex-end; background: #ffd; } |
Вот тут align-self: flex-end играет ключевую роль — он прижимает элемент к низу контейнера, создавая тот самый «запас хода», при котором bottom: 0 может начать работать.
Теперь при прокрутке вверх sticky-блок останется прилипшим к низу контейнера, пока не упрётся в нижнюю границу — и начнёт сдвигаться вверх, как и ожидалось.
Ещё один важный момент: высота самого sticky-элемента. Он должен быть выше, чем видимая часть контейнера.
Если sticky-блок по высоте вмещается целиком в прокручиваемую область, то он с самого начала окажется прижатым к bottom: 0 — и останется там всё время, никак не участвуя в прокрутке.
Проще говоря: чтобы увидеть эффект sticky с bottom, элемент должен сначала быть длиннее (выше) видимой области, и тогда при прокрутке его нижняя граница будет «прилипать» к низу, пока он не упрётся в свою естественную позицию.