Как прилепить сайдбар к низу страницы в момент, когда пользователь долистал до низа сайдбара?

Question

[Михаил Федотов]

Есть вот такая простая страница: https://jsfiddle.net/ez2r41fm/

Сайдбар 1000px высотой. Когда пользователь пролистывает страницу, листается и сайдбар. Но в момент, когда сайдбар пролистан полностью, нужно прилепить его к низу контейнера.

position: sticky;
bottom: 0;

не помогают.

По сути, если поменять на top: 0, то работает. Нужно то же самое, только с низом.

Хочется использовать простое решение на CSS без JS. Это вообще возможно?

Answer 1

[Cheizer]

Что бы прижать к низу sidebar, добавьте flex:none иначе ширина неактуальна.

.sidebar {
    background: linear-gradient(to top, #ece, #eec);
    max-height: 1000px;
    height: 500px;
    width: 320px;
    position: fixed;
    bottom: 0;
    flex: none;
    top: auto;
}

https://codepen.io/Cheizer/pen/oNNqOxo
А если хотите отследить момент когда html элемент выходит из области просмотра, то без js не обойтись.

Comments

[Михаил Федотов]

Здесь решение через fixed. Оно не подходит. Я специально указал в сайдбаре высоту в 1000px, так как чтобы его прилепить к низу, сначала нужно полностью пролистать.
Я правильно понимаю, что без JS (слушать событие scroll) такую задачу не решить?

[Cheizer]

Михаил Федотов,

.sidebar {
    background: linear-gradient(to top, #ece, #eec);
    max-height: 1000px;
    height: 500px;
    width: 320px;
    position: sticky;
    top: 100vh; /* OR 100% */
    flex: none;
}

А вот как отследить на css что блок уходит из области просмотра не знаю

Можно еще с calc попробовать, но это все равно не то, sidebar будет виден всегда и прижат к низу
top: calc(100% - 500px);

[Михаил Федотов]

top: calc(100% - 500px);

То, что нужно. Работает так, как надо, спасибо.
Только не понимаю, почему работает. Поясните, пожалуйста.

[Cheizer]

Михаил Федотов, смотрите, только при высоте фиксированной sidebar будет работать, мы top:100% прижимаем sidebar к низу, и после двигаем обратно наверх на высоту самого блока. - 500px;