Google AMP：如果用户向上滚动，则使标头/导航固定

Question

仅当用户向上滚动时，我才想固定页面的标题。我想使用位置观察器和amp动画，但不确定如何利用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>

在这方面的任何帮助将不胜感激。