javascript - 在滚动时将过渡应用到固定标题的最佳方法

Question

假设我有一个高度为 100 像素的标题。当用户向下滚动时，我想更改标题的外观并使其高度为 50px。

默认情况下同时设置标题样式并显示主标题，然后使用 JavaScript 隐藏主标题并在用户滚动时显示隐藏的（较小的标题）是否更有意义？

这似乎是一个非常复杂的过程，这就是为什么我不确定是否有更简单/更有效的方法来做到这一点。

Answer 1

为了让它在有人滚动时工作，你可以试试这个：

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 100) { 
            $('header').toggleClass('small');
        } 
        else {     
            $('header').toggleClass('small');
        }  
    });
});

Answer 2

如果你的标题是兼容的，即它们有一些相同的元素，你应该在你想要改变标题时添加一个类。这样做的好处是可以执行 CSS 转换，并且所有样式都保留在您的样式表中。

演示

这可能是您的 CSS 的一部分。

header {
    background: black;
    height: 100px;
    transition: all 1s ease;
}

header.small {
    height: 50px;
}

当添加小类时，它会在高度之间转换。