Angular2材质lite固定收割台不工作

我试图在angular cli项目中使用material lite fixed标头，标头与所有链接一起呈现，但不是固定的

My app.html：

<app-home></app-home>

---

我遗漏了什么还是出了什么问题？

根据mdl文档，您可以使用下面的代码来实现固定头

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
    <!-- Your content goes here -->

    </div>
  </main>
</div>

标题
标题

Mdl文档：-

---

希望这会有所帮助。

我认为问题在于fixed header类没有达到您期望的效果，或者至少没有达到我期望的效果，即添加position:fixed到header元素或类似的功能。但是，它只是告诉标题在大屏幕和小屏幕中始终可见。如果没有这个类，它只能在大屏幕上显示

我必须添加这些类，以便像引导导航栏一样修复它：

header.mdl-layout__header, .mdl-layout__drawer, .mdl-layout__obfuscator.is-
visible {
  position: fixed;
}

我使用了固定的标题和抽屉，所以我需要修复的是标题本身和抽屉

我还向包含应用程序内容的标题后面的主元素添加了一个填充顶部，与引导navbar相同

.demo-layout-transparent {
    height: 100vh;
    display: block;
    background: url('../assets/images/transparent.JPG');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
  your background is light. */
  color: white;
}

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
    <!-- Your content goes here -->

    </div>
  </main>
</div>

header.mdl-layout__header, .mdl-layout__drawer, .mdl-layout__obfuscator.is-
visible {
  position: fixed;
}