Прокрутка с липким выравниванием по верху или низу в зависимости от высоты ⇐ CSS

[Anonymous]

У меня есть макет с двумя столбцами, где оба столбца могут прокручивать. Когда один столбец больше, чем другой, меньший столбец должен прокручивать нижнюю часть его содержимого, а затем придерживаться там, пока более крупный столбец также не завершит прокрутку. Следующий код достигает этого. < /P>

Код: Выделить всё

.container {
display: grid;
grid-template-columns: 1fr 1fr;
}

.stick-container {
position: sticky;
align-self: end;
bottom: 0;
}

Код: Выделить всё

[img]https://images.unsplash.com/photo-1468487422149-5edc5034604f[/img]

[img]https://images.unsplash.com/photo-1507608616759-54f48f0af0ee[/img]

Это работает нормально, если оба столбца больше доступной высоты просмотра. . Однако, когда один столбец меньше, он прилипает к низу (как указано в CSS).
Однако в таких случаях я хочу, чтобы он прикреплялся к верху. Следующий код сделает это, однако я не знаю, как переключаться между двумя состояниями или существует ли даже лучший стиль выравнивания CSS, который напрямую обеспечивает оба состояния.

Код: Выделить всё

.container {
display: grid;
grid-template-columns: 1fr 1fr;
}

.stick-container {
position: sticky;
align-self: start; /* CHANGED */
top: 0;  /* CHANGED */
}

Код: Выделить всё

[img]https://images.unsplash.com/photo-1468487422149-5edc5034604f[/img]

[img]https://images.unsplash.com/photo-1507608616759-54f48f0af0ee[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-height