Как зафиксировать блок при скролле, когда скролл доходит до нужного места?

Question

[Иван Гришов]

Здравствуйте. У меня есть два блока, красный и синий. Красный - больше по высоте, синий - меньше.

Мне нужно сделать так, чтобы сначала скроллились оба блока, когда мы доходим до конца синего блока ( он меньше ), то блок фиксируется, а красный продолжает пролистываться. Мне это нужно сделать, чтобы между синим блоком и подвалом не было пустого пространства.

Подскажите, как можно зафиксировать синий блок, когда мы доходим до его конца? Я пробовал через position: sticky, не выходит. Я не понимаю, какой нужно задать top в пикселях.

Спасибо за любую подсказку.

https://codesandbox.io/s/blissful-meadow-y84jiy?fi...

Comments

[Иван Гришов]

И еще можно отследить через Intersection Observer API, когда появляется конец синего блока, но какие стили на него повесить я все равно не могу понять.

Answer 1

[tyoma_koder]

.row {
        display: flex;
        align-items: flex-start;
 }
.block-2 {
        flex: 0 1 50%;
        padding-left: 20px;
        position: sticky;
        top: 0;
 }

Comments

[Иван Гришов]

мне необходимо пролистать до конца синего блока и только потом его зафиксировать.

[tyoma_koder]

Иван Гришов, тогда top: calc(-1*(высота синего блока - высота блока с белым текстом))