Question

我正在尝试在我的angular cli项目中使用材质精简固定标题，标题使用所有链接呈现但不是固定的。

我的app.html：

<app-home></app-home>

我的home.html：

<app-header></app-header>
<app-services></app-services>
<app-about-us></app-about-us>
<app-contact></app-contact>

我的header.html：

<div class="demo-layout-transparent mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header mdl-layout__header--transparent">
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">Vision backlog</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a scrollTo class="mdl-navigation__link" href="#services">Services</a>
                <a scrollTo class="mdl-navigation__link" href="#about">About us</a>
                <a scrollTo class="mdl-navigation__link" href="#contact">Contact</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">

    </main>
</div>

这是css：

.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;
}

我错过了什么或错了吗？

Answer 1

根据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 docs： - https://getmdl.io/components/index.html#layout-section

希望这会有所帮助..

Answer 2

我认为问题在于，fixed-header类没有按照你期望的那样做，或者至少是我所期望的，这是添加位置：固定到header元素或类似的东西。但相反，它只是告诉标题在大屏幕和小屏幕中始终可见。没有那个类，它只能在大屏幕上看到。

我必须添加这些类才能像引导导航栏一样修复它：

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

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

我还在包含应用程序内容的标题后面的main元素中添加了一个padding-top，与bootstrap navbar相同。

Angular2材质精简固定头不起作用

2 个答案: