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

Question

好吧，我正在尝试实现一个在滚动时调整大小的标题，但我还向它添加了另一个名为 Headroom 的解决方案。 ，就标题隐藏而言，我让它工作得很好。可以看到我的进度HERE.如果您在第一次执行此操作时会注意到，您会发现没有任何故障，它会平滑地调整为 45 像素的较小标题，然后 headroom 激活并隐藏标题。但是第二次或之后的任何其他时间，它并没有平滑地调整大小，而是出现故障，或者跳入较小的标题然后净空激活，我试图让它在滚动时总是平滑地调整大小(你会看到它在 ( shrinkOn = 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,

提前致谢!

Answer 1

基本上，当您开始时，页眉上的类是: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