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


