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

Question

检查https://www.belkita.com的首页。如果您缓慢向下滚动，您可以检查如何在某个点它变得跳跃和丑陋，而当它应该平滑过渡到较小的标题时。我使用的 javascript 代码是：<script>// When the user scrolls down 50px from the top of the document, resize the header's font sizewindow.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 {

    top: 0;

    left: 0;

    right: 0;

}

//scrolled <50px

#masthead .notEnough {

    top: 30px;

}

Answer 2

你的情况有问题：

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

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