javascript - 修复重叠的html header Javascript错误？

好的，我试图实现一个可在滚动时调整大小的标头，但是我还向它添加了另一个解决方案，称为Headroom，它可以在标头隐藏的范围内正常工作。您可以看到我的进度HERE.，如果您第一次注意到它，就不会出现毛刺，它会平滑地调整为较小的45px标头，然后再激活并隐藏标头。但是在第二次或之后的任何其他时间，它不会平滑地调整大小，而是在较小的标题中出现毛刺或跳动，然后激活了余量，我正在尝试使其在滚动时始终平滑地调整大小的位置（您会看到它会缩小为（rinkOn = 50），然后以净空隐藏自身（您会在净空代码中看到公差为300）

这是缩小标题的脚本

<script>
      function init() {
          window.addEventListener('scroll', function(e){
             var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                  shrinkOn = 50,
                  header = document.querySelector("header");
        if (distanceY
                       > shrinkOn)
  {
            classie.add(header,"smaller", "headroom");
        } else {
            if (classie.has(header,"smaller", "headroom")) {
                classie.remove(header,"smaller", "headroom");
            }
        }
    });
}
      window.onload = init();
  </script>

这是激活余量的脚本

  var myElement = document.querySelector("header");
  // construct an instance of Headroom, passing the element
  var headroom  = new Headroom(myElement);
  // initialise
  headroom.init();

这些是选项

  "tolerance": 2,
  "offset": 350,

提前致谢！

最佳答案

基本上，当您开始时，标头上的类为：headroom headroom--top

在过渡过程中，添加smaller，然后删除headroom--top，替换为headroom--not-top并添加headroom--unpinned。所以第二条：

headroom smaller headroom--top headroom--pinned

并结束于：

headroom smaller headroom--not-top headroom--unpinned

然后，返回过渡，将headroom--not-top换为headroom--top，将headroom--unpinned换成headroom--pinned，然后删除smaller，但切勿删除headroom--pinned，这是您需要做的回到您的初始状态。

因此，此处的结果是在脚本中添加以下行：

...snip
    classie.remove(header,"smaller", "headroom");
    classie.remove(header,"headroom--pinned", "headroom");  //add this line here
}

在这里看看：
Your forked codepen