Angular 4 - 頂部導航欄不會鎖定在頂部

Question

我無法想出一種方法來鎖定頂部導航欄以停留在屏幕頂部。當頁面變得太長時，則啓用滾動。我試圖禁止滾動頂部導航欄並將其固定到屏幕頂部。下面

相關文件列表：

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

出於某種原因位置是：固定;似乎沒有工作。

Answer 1

所以看起來好像你只需要使用絕對定位來實現這一點。

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> 

這實現了我想要的東西具有底欄保持鎖定到頂部和頂部不覆蓋主要內容。