Question

好的我正在尝试实现一个在滚动时调整大小的标题，但我还添加了另一个名为Headroom的解决方案，我让它工作得很好，直到标头隐藏。你可以看到我的progess HERE.如果你第一次看到它会注意到，你会看到没有故障，它会平滑地调整到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>

这是激活余量的脚本

  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

修复重叠的html标头Javascript错误？

1 个答案: