角度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> 

そしてこれが一番上にロックされたとの上にオーバーレイしないまま私は下のバーを持って望んでいた達成主な内容