jquery - 我的页眉收缩转换无法触发我错过的内容？

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

应该发生什么：


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


会发生什么：


正常滚动；标题栏不会停留在视图中，也不会发生过渡。


我已经基于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。我知道这里没有向上移动菜单的规则，但考虑到参考站点上的示例，徽标至少应缩小。

/* 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;
}

我绝对觉得我在这里错过了一些事情。它是什么？

最佳答案

您必须在.portfolio-header上指定高度。当前，您仅指定新的高度，但是动画没有任何起点：

.portfolio-header {
    height: 300px;
}