javascript - 随滚动变化的动画粘性标题

Question

我一直在尝试像数百个其他网站一样制作动画粘性标题。不同之处在于，我希望动画随着滚动而移动，而不是在经过某个滚动点后，捕捉到新的大小。

我正在尝试做的一个例子是在这个网站上:http://www.kriesi.at/themes/enfold/

感谢任何帮助，我是 javascript 的新手，所以我希望这不是我不知道要谷歌什么的情况。

编辑:这是我到目前为止所拥有的(修复了我问题的主要部分)

$(function () {
    $(window).scroll(function () {
        var scroll = getCurrentScroll();
        var progress = ((scroll * 145) / 100);
        var prog = document.getElementById("prog");
        prog.innerHTML = scroll + "px " + progress + "%";

        header = document.getElementById('header');

        if (progress < 5) {
            header.style.height = 145 + "px";
        }
        if (progress > 5 || progress < 100) {
            header.style.height = (145 - progress + (scroll / 2)) + "px";
        }
        if (progress >= 100) {
            header.style.height = 75 + "px";
            header.style.opacity = 0.8;
        }
    });

    function getCurrentScroll() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }
});

当中间的 if 语句为真时，用户将位于标题的最小 (0) 和最大滚动点 (150) 之间。 为什么第一个 If 语句不起作用，因为当我使用触控板向上滚动经过页面顶部时，页眉继续增长？

Answer 1

您创建了 2 个不同的类。 1 个常规标题类，然后是粘性标题类。使用 jQuery 检测窗口的滚动位置。通常人们使用 css3 过渡来制作动画，但只是为了快速更改而将其保留。

HTML

<header>Sticky Header</header>

CSS

header {
    position: fixed;
    width: 100%;
    text-align: center;
    font-size: 72px;
    line-height: 108px;
    height: 108px;
    background: #335C7D;
    color: #fff;
    font-family:'PT Sans', sans-serif;
}
header.sticky {
    font-size: 24px;
    line-height: 12px;
    height: 48px;
    background: #efc47D;
    text-align: left;
    padding-left: 20px;
}

JQUERY

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('header').addClass("sticky");
    } else {
        $('header').removeClass("sticky");
    }
});

http://jsfiddle.net/3Lj0oyL4/

您可以在 webdesignerdepot. 阅读有关该主题的教程。