滚动时顶部的应用栏显示空白

Question

在我的HTML网站上滚动时，“顶部”应用栏消失（根据要求）。但这会在内容上留下空白（空白的大小与顶部栏的大小相同）。有没有什么办法解决这一问题？ 我最近开始编码，这是我第一个熟悉材质设计组件的随机项目。

我完全不知道该怎么办。有人可以帮忙吗？

<header class="mdc-top-app-bar app-bar" id="app-bar">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
            <span class="mdc-top-app-bar__title">This is my title</span>
        </section>
    </div>
</header>

<aside class="mdc-drawer mdc-drawer--open mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
    <div class="mdc-drawer__content">
        <div class="mdc-list">
            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
                <i class="material-icons mdc-list-item__graphic">home</i>
                <span class="mdc-list-item__text">Home</span>
            </a>
        </div>
    </div>
</aside>

<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
    <main class="main-content" id="main-content">

        <!--Here are three material cards in a grid layout-->

    </main>
</div>

我希望滚动时Top App Bar不会留有空白。