查看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>
最佳答案
您的情况有问题:
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50)
您的第一个条件永远不会为真,document.body.scrollTop 的计算结果始终为 0。您的第二个条件被激活,然后横幅尺寸减小。当横幅尺寸减小时,第二个条件不再通过,因此横幅尺寸增加。一旦它增加大小,条件就会在循环中再次通过等等。
关于javascript - 向下滚动时,粘性标题过渡变得跳跃和丑陋,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58285387/