修复一个重叠的html头Javascript错误

Question

好吧，我试图实现一个标题，在滚动时调整大小，但我也添加了另一个解决方案，它被称为Headroom，我让它工作得很好，只要标题隐藏。你可以在这里看到我的进步。如果你第一次这样做，你会发现没有任何故障，它会平滑地调整到45px的小标题，然后headroom激活并隐藏标题。但是第二或任何其他时间之后，它不会平滑地调整大小，而是它出现故障，或者跳到较小的头部，然后headroom激活，我试图让它在滚动时总是平滑地调整大小(你会看到它在(shrinkOn = 50)处变小，然后隐藏自己的headroom(你会看到在headroom代码中公差为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>

这是激活Headroom的脚本

  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
}

看这里: