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

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

这是 shakie 因为你的 div#header-sidebar 得到 display: none; 当你向下滚动时。如果 scrollTop 大于 50 而不是内联样式，还要添加一个类，因为其余的只是 css 样式。例如：/* scrolled >50px */#masthead.scrolledEnough {&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: 0;}//scrolled <50px#masthead .notEnough {&nbsp; &nbsp; top: 30px;}

Answer 2

你的情况有问题：&nbsp;if&nbsp;(document.body.scrollTop&nbsp;>&nbsp;50&nbsp;||&nbsp;document.documentElement.scrollTop&nbsp;>&nbsp;50)您的第一个条件永远不会为真，document.body.scrollTop 始终评估为 0。您的第二个条件被激活，然后横幅尺寸减小。当横幅尺寸减小时，第二个条件不再通过，因此横幅尺寸增大。一旦它增加大小，条件再次通过等等循环。