0

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

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

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

4

2 回答 2

3

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

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 100) { 
            $('header').toggleClass('small');
        } 
        else {     
            $('header').toggleClass('small');
        }  
    });
});
于 2013-08-02T02:54:12.803 回答
1

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

演示

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

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

header.small {
    height: 50px;
}

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

于 2013-08-02T02:25:47.127 回答