将转换应用于滚动上的固定标题的最佳方法

Best method of apply a transition to a fixed header on scroll

本文关键字：标题 最佳 方法 应用于 滚动 转换      更新时间：2023-09-26

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

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

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

要在有人滚动时使其工作，您可以尝试以下操作：

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

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

Demo

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

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

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

相关文章：