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> 

这实现了我想要的东西具有底栏保持锁定到顶部和顶部不覆盖主要内容。