javascript - 向下滚动时，粘性标题过渡变得跳跃和丑陋

Question

查看https://www.belkita.com的首页.如果您缓慢向下滚动，您可以检查它在某些时候如何变得跳跃和丑陋，而当它应该平滑过渡到较小的标题时。

我使用的 javascript 代码是:

<script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};


function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("header-sidebar").style.display = "none";
        document.getElementById("masthead").style.height = "80px";
    document.getElementsByClassName("custom-logo")[0].style.maxWidth = "130px";

  } else {
        document.getElementById("header-sidebar").style.display = "block";
        document.getElementById("masthead").style.height = "140px";
      document.getElementsByClassName("custom-logo")[0].style.maxWidth = "230px";
  }
}
</script>

Answer 1

您的情况有问题:

 if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50)

您的第一个条件永远不会为真，document.body.scrollTop 的计算结果始终为 0。您的第二个条件被激活，然后横幅尺寸减小。当横幅尺寸减小时，第二个条件不再通过，因此横幅尺寸增加。一旦它增加大小，条件就会在循环中再次通过等等。