修复重叠的html头Javascript错误？

好的，我试图实现一个在滚动时调整大小的标题，但我还添加了另一个解决方案，称为，我让它工作得很好，直到标题隐藏为止。你可以看到我的进度，如果你注意到你第一次这样做，你看不到任何小故障，它顺利地调整大小，以较小的头45px，然后净空激活和隐藏头。但第二次或之后的任何时间，它都不会平滑地调整大小，而是会出现小故障，或者跳入较小的标题，然后净空激活。我试图让它在滚动时总是平滑地调整大小（你会看到它在（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>

这些是选项

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

---

提前感谢！

基本上，当您开始时，标题上的类是：

净空净空--top

在过渡过程中，添加

较小的

，删除

净空--top

，替换为

净空--not top

，并添加

净空--unpinned

。因此第二条：

headroom smaller headroom--top headroom--pinned

结束于：

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

然后，在转换过程中返回，您使用

净空--top

切换

净空--top

和

净空--unpinded

切换

净空--pinted

，然后移除

较小的

，但永远不要移除

净空--pinted

，这是恢复初始状态所需的操作

因此，这里的结果是在脚本中添加这一行：

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

请看这里：

---

太棒了！没错，从来没有想过它永远不会被解开，谢谢你，这正是我想要的！

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