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

[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]



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


.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