По умолчанию свойства позиционирования равны
auto, что означает расположение элемента по месту его появления. Достаточно вложить второй блок в первый, расположить его после контента и не трогать у него
top.
HTML<div class="f1">
<div class="f1-content"></div>
<div class="f2">
<div class="f2-content"></div>
</div>
</div>
CSS.f1,
.f2 {
position: fixed;
left: 0;
right: 0;
}
.f1 {
top: 0;
}
.f1-content {
height: 100px; //может меняться в любой момент
background: rgba(102, 153, 204, .7);
}
.f2-content {
height: 100px;
background: rgba(51, 102, 153, .7);
}
Пример (кликать на верхнем блоке)
Хотя не понимаю, зачем вам такой геморрой, если можно второй блок сделать обычным. Если оба блока лежат в фиксированном, то и управлять ими легче.