Headroom - скрытие двух заголовков вместо одного

Question

У меня есть рабочий код, который будет скрывать заголовки с анимацией при прокрутке вниз, и, если вы прокрутите вниз, он покажет их снова, как и ожидалось. Однако, если вы прокрутите дальше вниз, только первый из них вернется в исходное положение, а другой не появится вверху.

Вот CodePen: https://codepen.io/robbsadler/pen/LdYyPZ

Вики, мои извинения за то, что я отправил твит - мозговая пластинка - увидел ссылку в твиттере и отправил перед тем, как остановиться.

  <header id="header" class="header header--fixed hide-from-print" role="banner">
      <div class="container" >

          <nav id="nav" class="nav-wrapper" role="navigation">
              <ul class="nav nav--main">
                  <li class="nav__item ">
                      <a class="header__link subdued" href="https://www.github.com/WickyNilliams/headroom.js">
                          <span aria-hidden="true" class="icon icon--github"></span>
                          <span class="complimentary push--left">GitHub</span>
                      </a>
                  </li>
                  <li class="nav__item ">
                      <a class="header__link subdued" href="https://www.twitter.com/WickyNilliams">
                          <span aria-hidden="true" class="icon icon--twitter"></span>
                          <span class="complimentary push--left">@WickyNilliams</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <a href="http://wicky.nillia.ms/headroom.js/" class="brand header__link">
              <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b>
          </a>
      </div>
  </header>

  <header class="feature header2">
      <div class="container container--wide feature-title">
          <h1 class="feature-title__title headroom-title">Headroom.js</h1>
          <p class="feature-title__subtitle">Give your pages some headroom. Hide your header until you need it.</p>
      </div>
  </header>

  <article>
  .... more markup here...

Javascript:

(function() {
      var header = new Headroom(document.querySelector(".header"), {
          tolerance: 5,
          offset : 55,
          classes: {
            initial: "animated",
            pinned: "slideDown",
            unpinned: "slideUp"
          }
      });
      header.init();

      var header2 = new Headroom(document.querySelector(".header2"),     {
          tolerance: 5,
          offset : 55,
          classes: {
            initial: "animated",
            pinned: "slideDown",
            unpinned: "slideUp"
          }
      });
      header2.init();

  }());

Изменить: я понял, что первый заголовок является фиксированной позиции, а второй нет, и, следовательно, будет выдвигаться и до тех пор, пока документ не прокручивается за пределами его представления. Я попытался изменить его на исправленный, и он работает, но скрывает другой заголовок. Я переместил верхнюю часть второго заголовка вниз, и с фиксированной позицией он начинает выдвигаться, но все еще показывает величину, смещенную верхним значением.

Первоначально я хотел использовать запасную часть для того, чтобы реагировать на ограничения ширины браузера, а не управлять верхней позицией на вторичных элементах заголовка и перемещать их вниз, когда первый заголовок становится выше. Похоже, мне, возможно, придется справиться с этим самостоятельно.