Google AMP: сделать заголовок / навигацию исправленной, если пользователь прокручивает вверх

Question

Я хочу сделать заголовок моей страницы фиксированным, только если пользователь прокручивает вверх.Я хочу использовать наблюдатель положения и анимацию усилителя, но не уверен, как использовать эти вещи, предоставляемые AMP.ожидаемое поведение должно быть примерно таким: https://codepen.io/kaemak/pen/mHyKa/

Мой код структурирован так:

<div class="header">
  <div class="logo">
   <!-- logo image -->
  </div>
  <div class="sidebar-menu">
   <!-- Hamburger -->
  </div>
</div>
<!-- Header ends here-->

<!-- This is the part I want to be sticky if I am scrolling up -->
<div class="main-menu">
  <nav>
    <!-- links inside -->
  </nav>
</div>

Любая помощь в этом отношении будет высоко оценена.