Position Sticky, изменить поведение

Как сделать что-то вроде гибрида между position: fixed и position: sticky?

в данном примере я хочу чтобы header__bottom вёл себя как position: sticky
но, так как он находится в блоке header, sticky работает только в его пределах.

Как сделать чтобы sticky для header__bottom работал на всю длину документа, не вынося header__bottom за пределы header

p.s Плагины JQUERY и похожие решения не интересуют) Желательно вообще обойтись без JS

.header {
  height: 300px;
  background: silver;
}

.header__top, .header__bottom {
  height: 50px;
}

.header__bottom {
  background: red;
  position: sticky;
  top: 0;
}

.body {
  height: 700px;
  background: green;
}

<div class="container">
  <div class="header">
    <div class="header__top"></div>
    <div class="header__bottom"></div>
  </div>
  <div class="body">
    body
  </div>
</div>