假设我有一个高度为 100 像素的标题。当用户向下滚动时,我想更改标题的外观并使其高度为 50px。
默认情况下同时设置标题样式并显示主标题,然后使用 JavaScript 隐藏主标题并在用户滚动时显示隐藏的(较小的标题)是否更有意义?
这似乎是一个非常复杂的过程,这就是为什么我不确定是否有更简单/更有效的方法来做到这一点。
假设我有一个高度为 100 像素的标题。当用户向下滚动时,我想更改标题的外观并使其高度为 50px。
默认情况下同时设置标题样式并显示主标题,然后使用 JavaScript 隐藏主标题并在用户滚动时显示隐藏的(较小的标题)是否更有意义?
这似乎是一个非常复杂的过程,这就是为什么我不确定是否有更简单/更有效的方法来做到这一点。
为了让它在有人滚动时工作,你可以试试这个:
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('header').toggleClass('small');
}
else {
$('header').toggleClass('small');
}
});
});
如果你的标题是兼容的,即它们有一些相同的元素,你应该在你想要改变标题时添加一个类。这样做的好处是可以执行 CSS 转换,并且所有样式都保留在您的样式表中。
这可能是您的 CSS 的一部分。
header {
background: black;
height: 100px;
transition: all 1s ease;
}
header.small {
height: 50px;
}
当添加小类时,它会在高度之间转换。