在页面滚动上修复具有可变高度的标题

Question

我正在尝试学习CSS并构建html页面，并在这个领域有点新鲜。 我想构建一个带有修复标题的页面，这样当我滚动页面时它不会消失但是当它向下滚动时它的高度会改变，所以例如如果我开始向下滚动它会缩小它的高度或者如果我开始向上滚动高速它将显示完整的标题（缓慢向上滚动将不会显示完整标题，直到我到达页面顶部）。 我在may网站上看过这个功能，例如http://www.flipkart.com/

Answer 1

首先，您需要使用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操作

Answer 2

如果您希望始终修复元素，则应使用position: fixed; top: 0。如果您想在用户滚动到页面上的某个元素时更改大小或smth，则需要使用javascript。