Question

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

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

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

Answer 1

为了让人们滚动时你可以试试这个：

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

Answer 2

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

Demo

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

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

header.small {
    height: 50px;
}

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

在滚动上将过渡应用于固定标题的最佳方法

2 个答案:

Demo