Как задать фиксированные элементы в шапке?

Question

[Дмитрий]

Столкнулся с такой проблемой, на страницах есть шапка, на одной из страницы добавляется картинка, при скролле она не должна быть фиксированной, а нижний элемент должен закрепляться к верхнему , для примера код ниже как можно решить данную проблему?

header {
      height: 100%;
    }

    header .header__top {
      height: 30px;
      background: blue;
      width: 100%
    }

    header .header__img {
      height: calc(100vh - 60px);
      background: green;
      width: 100%
    }

    header .header__bottom {
      height: 30px;
      background: yellow;
      width: 100%
    }
.content {
height: 300px;
}

<header>
      <div class="header__top">Верхний элемент</div>  
      <div class="header__img"></div>  
      <div class="header__bottom">Нижний элемент</div>
    </header>

<div class="content"></div>

Answer 1

[aftar]

Смотри в сторону position: sticky или fixed
Вот пример