javascript - 修复页面滚动时可变高度的标题

Question

我正在尝试学习 CSS 和构建 html 页面，并且在这个领域有点新鲜。我想建立一个带有修复标题的页面，这样当我滚动页面时它不会消失但是它的高度会在向下滚动时改变，所以例如如果我开始向下滚动它会缩小它的高度或者如果我开始高速滚动它将显示完整的标题(缓慢向上滚动不会显示完整的标题，直到我到达页面顶部)。我在 5 月的网站上看到过这个功能，例如 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 状态，您可以放置​​如下内容:

header{height:100px}

基本上，当你在滚动上添加类时，你可以用它通过 css 进行操作