Фиксированные элементы в шапке

Question

Столкнулся с такой проблемой, на страницах есть шапка, на одной из страницы добавляется картинка, при скролле она не должна быть фиксированной, а нижний элемент <div class="header__bottom"></div> должен закрепляться к верхнему <div class="header__top"></div>, для примера код ниже как можно решить данную проблему?

    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

Если использовать js, то просто менять свойство position на fixed, если прокрутка больше высоты картинки, и обратно. Код написал как попало, но идея понятна.

var imgH = $('.header__img').outerHeight();
window.addEventListener('scroll', setHeaderFixed);

function setHeaderFixed() {
  if ($(window).scrollTop() >= imgH - 30) {
    $('.header__bottom').css({position: 'fixed',top: '30px'});
    window.removeEventListener('scroll', setHeaderFixed);
    window.addEventListener('scroll', setHeaderInherit);
  }
}

function setHeaderInherit() {
  if ($(window).scrollTop() < imgH - 30) {
    $('.header__bottom').css({position: 'inherit'});
    window.removeEventListener('scroll', setHeaderInherit);
    window.addEventListener('scroll', setHeaderFixed);
  }
}

body {
  margin: 0;
  padding: 0;
}

header {
  height: 100%;
}

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

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

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

.content {
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<header>
  <div class="header__top">Верхний элемент</div>
  <div class="header__img"></div>
  <div class="header__bottom">Нижний элемент</div>
</header>

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

Answer 2

.header__top {
  height: 30px;
  background: blue;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

.header__bottom {
  height: 30px;
  background: yellow;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}
    
.content {
  height: 500px;
  background: red;
}

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

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

БЛОГ НА HUSL

Фиксированные элементы в шапке

Ответы (2 шт):