固定页眉在页面滚动上的可变高度
固定页眉在页面滚动上的可变高度
提问于 2015-11-04 00:39:01
我正在努力学习CSS和构建html页面，并在这个领域有点新手。我想建立一个具有固定标题的页面，这样当我滚动页面时，它不会消失，但它的高度会在向下滚动时发生变化，所以例如，如果我开始向下滚动，它会缩小它的高度，或者如果我开始以高速向上滚动，它将显示完整的标题(缓慢向上滚动将不会显示完整的标题，直到我到达页面顶部)。我在五月份的网站上看到过这个特性，比如http://www.flipkart.com/
回答 2
Stack Overflow用户
发布于 2015-11-04 00:43:34
首先，您需要使用jquery在滚动时在标题中添加/删除一个类：
$(window).on("scroll", function () {
if ($(this).scrollTop() > 0) {
$("header").addClass("stickyHeader");
}
else {
$("header").removeClass("stickyHeader");
}
});在css中，你可以添加类似这样的东西：
.stickyHeader{position:fixed;top:0;height:50px}对于正常的报头状态，您可以放入如下内容：
header{height:100px}基本上，当您在滚动上添加类时，您可以使用它通过css进行操作
Stack Overflow用户
发布于 2015-11-04 00:43:26
如果你想让元素总是固定的，你应该使用position: fixed; top: 0。当用户滚动到页面上某个元素时，如果您想更改大小或smth其他，则需要使用javascript。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33504491
复制相关文章
相似问题
腾讯云开发者
