jquery - 我的 header 收缩转换未能触发我错过了什么？

Question

标题 http://www.loganyoung.za.net

应该发生什么:

• 标题栏和 Logo 应在用户向下滚动时平滑缩小，然后在用户位于页面顶部时恢复到完整大小
• 菜单栏应固定在缩小的标题栏底部，否则会完全消失

发生了什么:

• 正常滚动；标题栏不会停留在 View 中，也不会发生任何转换。

我已经根据 this Animated Resizing Header On Scroll blog article 构建了转换.

呈现的标记如下所示:

<div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--scroll portfolio-header">
        <div class="mdl-layout__header-row portfolio-logo-row">
            <div class="mdl-layout__title">
                <div class="portfolio-logo"></div>
                <h1 class="mdl-layout__title">Software Development Portfolio</h1>
            </div>
        </div>
        <div class="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <a class="mdl-navigation__link" href="/">Portfolio</a>
                <a class="mdl-navigation__link" href="/about.php">About</a>
                <a class="mdl-navigation__link" href="/contact.php">Contact</a>
            </nav>
        </div>
    </header>
    <main class="mdl-layout__content">

    </main>
</div> <!-- end .mdl-layout container -->

<script>
    function Scroll() {
        window.addEventListener('scroll', function(e) {
            var Y = window.pageYOffset || document.documentElement.scrollTop;
            var Header = $(".portfolio-header");

            if (Y > 300)
            {
                Header.addClass("smaller");
            }
            else
            {
                Header.removeClass("smaller");
            } 
        });
    }
    window.onload = Scroll();
</script>

这是 CSS。我知道此处没有向上移动菜单的规则，但根据引用站点上的示例， Logo 至少应缩小。

/* Header scrolling */
.portfolio-header. {
    will-change: height;
    transition: height 0.3s;
    -o-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -moz-transition: height 0.3s;
}
/* logo and menu both go into .mdl-layout__header-row divs */
.portfolio-header .mdl-layout__header-row:first-child {
    will-change:height;
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
}
.portfolio-header.smaller {
    min-height: 64px;
}
.portfolio-header .mdl-layout__header-row.smaller {
    min-height: 64px;
}

我确实觉得我在这里错过了什么。这是什么？

Answer 1

您必须在 .portfolio-header 上指定高度。目前你只指定了新的高度，但没有任何动画开始的地方:

.portfolio-header {
    height: 300px;
}