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

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

<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 не наезжали друг на друга)?

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

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

Индикатор прокрутки конкретного блока?

Отработало как надо, спасибо большое!