Angular 4 - Obere Navigationsleiste bleibt nicht nach oben gesperrt

Question

Ich kann keine Möglichkeit finden, die obere Navigationsleiste zu sperren, um oben auf dem Bildschirm zu bleiben. Wenn die Seite zu lang wird, ist das Scrollen aktiviert. Ich versuche zu verhindern, dass die obere Navigationsleiste gescrollt wird und fixiere sie oben auf dem Bildschirm.

Einschlägige Dateien unter:

app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme"> 
    <md-sidenav-container class="sidenavContainer"> 
     <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over"> 
      <md-toolbar layout="row" color="primary"> 
       <h2> 
        <span>Side Panel</span> 
       </h2> 
       <span class="nav-spacer"></span> 

       <md-button class="close-icon" (click)=sidenav.close()> 
        <md-icon>close</md-icon> 
       </md-button> 
      </md-toolbar> 
      <nav-menu (onSelected)="setTheme($event)"></nav-menu> 
     </md-sidenav> 

     <md-toolbar class="top-nav" color="primary"> 
      <button md-button (click)="sidenav.toggle()"> 
       <md-icon>menu</md-icon> 
      </button> 

      <div id="navBarTitle">Dashboard</div> 
      <span class="nav-spacer"></span> 
      <div>Signed in as: AdminUser</div> 
      <md-icon class="nav-icon"> 
       <div routerLink="/settings" mdTooltip="Settings">settings</div> 
      </md-icon> 
      <md-icon class="nav-icon" mdTooltip="Help">help</md-icon> 
     </md-toolbar> 

     <div class="router-container"> 
      <router-outlet></router-outlet> 
     </div> 
    </md-sidenav-container> 
</div> 

app.component.css

.sidenavContainer { 
    height: 100%; 
    width: 100%; 
} 

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown { 
    background: rgba(0, 0, 0, 0.1); 
} 

.close-icon { 
    cursor: pointer; 
    margin-top: 9px; 
} 

.top-nav { 
    position: fixed; 
    width: 100%; 
    height: 64px; 
    top: 0px; 
} 

.nav-icon { 
    padding: 0 15px; 
    cursor: pointer; 
} 

.router-container { 
    width: 100%; 
    position: relative; 
    top: 64px; 
} 

Aus irgendeinem Grund position: fixed; scheint nicht zu funktionieren.

Answer 1

So scheint es, als ob Sie nur absolute Positionierung verwenden müssen, um dies zu erreichen.

app.component.css

.sidenavContainer { 
    height: 100%; 
} 

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown { 
    background: rgba(0, 0, 0, 0.1); 
} 

.close-icon { 
    cursor: pointer; 
    margin-top: 9px; 
} 

.top-nav { 
    height: 64px; 
    position: fixed; 
    top: 0px; 
} 

.router-container { 
    width: 100%; 
    overflow: auto; 
    position: absolute; 
    bottom: 0; 
    top: 64px; 
} 

.nav-icon { 
    padding: 0 15px; 
    cursor: pointer; 
} 

app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme"> 
    <md-sidenav-container class="sidenavContainer"> 
     <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over"> 
      <md-toolbar layout="row" color="primary"> 
       <h2> 
        <span>Side Panel</span> 
       </h2> 
       <span class="nav-spacer"></span> 

       <md-button class="close-icon" (click)=sidenav.close()> 
        <md-icon>close</md-icon> 
       </md-button> 
      </md-toolbar> 
      <nav-menu (onSelected)="setTheme($event)"></nav-menu> 
     </md-sidenav> 

     <md-toolbar class="top-nav" color="primary"> 
      <button md-button (click)="sidenav.toggle()"> 
       <md-icon>menu</md-icon> 
      </button> 

      <div id="navBarTitle">Dashboard</div> 
      <span class="nav-spacer"></span> 
      <div>Signed in as: AdminUser</div> 
      <md-icon class="nav-icon"> 
       <div routerLink="/settings" mdTooltip="Settings">settings</div> 
      </md-icon> 
      <md-icon class="nav-icon" mdTooltip="Help">help</md-icon> 
     </md-toolbar> 

     <div class="router-container"> 
      <router-outlet></router-outlet> 
     </div> 
    </md-sidenav-container> 
</div> 

Und das erreicht, was ich mit mit der unteren Leiste wollte nach oben verriegelt bleiben und Overlay nicht oben auf der Hauptinhalt.