html - 如何使材料设计精简版抽屉位置动态？

Question

刚开始使用 Material Design lite 创建网站。好东西。

我已经设法破解标题以在滚动时保持固定在页面顶部：

HTML

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" >
            <header class="mdl-layout__header">
                <div class="mdl-layout__header-row">

等等..就像在演示中一样

CSS

body div header{
    position: fixed;
}

现在，当我滚动时，页眉及其所有元素都停留在页面顶部；没问题。

但是，当我按下汉堡按钮打开抽屉时，只有当滚动条位于页面顶部时它才会正确显示。如果页面向下滚动，部分抽屉将被隐藏。

知道如何解决这个问题吗？

请注意，我想不出更好的方法来将标题保持在顶部，所以这可能是真正的问题（即position: fixed;部分）