Angular2 Material lite fixed Header funktioniert nicht

Question

Ich versuche, eine materielle lite festen Header in meinem eckigen CLI-Projekt zu verwenden, wird Header mit allen Links gerendert, ist aber nicht behoben.

Mein app.html:

<app-home></app-home> 

Mein home.html:

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

Mein 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> 

Und es ist 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; 
} 

Fehle ich etwas oder etwas falsch?

Answer 1

Gemäß der MDL-Dokumentation können Sie den folgenden Code verwenden, um feste Header zu implementieren.

<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

this helps ..

Answer 2

ich glaube, das Problem ist, dass die Fest Header-Klasse Sie es nicht, was tut erwarten würde, oder zumindest das, was Ich habe es erwartet, das ist Add-Position: behoben, um das Header-Element oder so ähnlich. Stattdessen wird der Header nur so angezeigt, dass er in großen und kleinen Bildschirmen immer sichtbar ist. Ohne diese Klasse wäre es nur auf großen Bildschirmen sichtbar.

Ich hatte diese Klassen hinzuzufügen, um es wie eine Bootstrap-navbar zu beheben:

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

ich verwendet, um die festen Header mit Schublade, was ich den Header reparieren müssen selbst ist und die Schublade.

Ich fügte auch ein Padding-Top zum Hauptelement nach der Kopfzeile, die Ihren Anwendungsinhalt enthält, wie Bootstrap Navbar.