«Прилипание» блока к другому «липкому» блоку при прокрутке?

Question

[Эдуард Ларюшкин]

Добрый день! Подскажите, пожалуйста, как сделать так, что бы при прокрутке к «липкому» блоку «прилепал» снизу другой «липкий» блок?

<div class="position-sticky">
<p>Содержимое «липкого» блока 1</p>
</div>

<div>Не «липкий» блок 1</div>
<div>Не «липкий» блок 2</div>
<div>Не «липкий» блок 3</div>

<div class="position-sticky">
<p>Содержимое «липкого» блока 2</p>
</div>

Answer 1

[Владимир Проскурин]

Так?

Comments

[Эдуард Ларюшкин]

К сожалению, нет: размер «липкого» блока 1 может меняться, поэтому делать отступ по px не вариант. :(

[Максим Тимофеев]

Эдуард Ларюшкин, А что мешает в js измерять его высоту и подставлять?

[Владимир Проскурин]

Эдуард Ларюшкин, используйте скрипты

[Эдуард Ларюшкин]

Владимир Проскурин, спасибо большое, действительно помогло. Но появилась вытекающая проблема: при прокрутке ниже блока, в котором находится код с «липкими» блоками, «липкие» блоки наезжают друг на друга... Грубо говоря, код выглядит так:

<div class="col-9">
<p>Блок 1</p>
</div>

<div class="col-3">
<div class="position-sticky" id="sticky_header">
<p>Содержимое «липкого» блока 1</p>
</div>

<div>Не «липкий» блок 1</div>
<div>Не «липкий» блок 2</div>
<div>Не «липкий» блок 3</div>

<div class="position-sticky position-sticky_footer" id="sticky_footer">
<p>Содержимое «липкого» блока 2</p>
</div>
</div>

<div class="col-12">
<p>Блок 2</p>
</div>

Как можно сделать так, чтобы они вели себя как будто в одном «липком» блоке (в начале блока 2 не наезжали друг на друга)?

[profesor08]

https://caniuse.com/#search=sticky
пользоваться еще рано

[Владимир Проскурин]

Эдуард Ларюшкин, использовать transform: translate вместо top

[profesor08]

Владимир Проскурин, как-то нехорошо оно себя ведет из-за js кода, да и вообще position: stycky работает очень примитивно и грубо.