Angular2マテリアルライト固定ヘッダが機能しない

Question

私は角度クリプロジェクトでマテリアルライト固定ヘッダを使用しようとしていますが、ヘッダはすべてのリンクでレンダリングされますが固定されていません。

マイ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

次のコードを使用して、固定ヘッダーを実装することができます。

<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のドキュメント： - https://getmdl.io/components/index.html#layout-section

・ホープ、このことができます。..

Answer 2

私はこの問題は、固定ヘッダクラスは、あなたがそれを期待する何をしないということである、または少なくとも何だと思います私はそれを期待しています。これは、位置を追加することです：ヘッダ要素などに固定されています。しかし、代わりに、それはヘッダーに大小のスクリーンで常に見えるように指示するだけです。そのクラスがなければ、大画面でしか見ることができません。

私は、ブートストラップナビゲーションバーのようにそれを修正するためにこのクラスを追加する必要がありました：

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

私は引き出し付き固定ヘッダを使用ので、私は修正するために必要なものをヘッダ自体引き出しです。

また、アプリケーションコンテンツを含むヘッダーの後に、メイン要素にpadding-topを追加しました。これはブートストラップnavbarと同じです。