修复了 header 使用 angular material 和 flex 布局

Question

我正在使用 Angular 2 个应用程序，使用 angular material 和 angular flex layout.I 在我的应用程序中创建了一个 登录表单 和 a header 仅在登录我的主页后可见。

在我的 app.component.html 中，我添加了我的 header 并应用了以下样式以在滚动时修复它。

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">

在我的主页我添加了一个mat-toolbar组件，mat-card组件和mat-sidenav分量.

登录应用程序后，当我滚动主页内容时，我的固定 header 和我的 header 被主页内容覆盖了。

下图是我的app.component.html

<div style="margin-bottom:5px;
   top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;">
<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"><span class="span">Rockefeller FY 2009</span></h2>
</mat-toolbar>


<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"> <span class="span">AUG-SEP</span></h2>
</mat-toolbar>


<mat-toolbar *ngIf="showmenu.visible1"  fxLayout="column" fxLayoutAlign="space-around start" 
              style="background: darkblue;height: 3vh;">
    <h6>Web-Based Space Survey Application </h6>
</mat-toolbar>


<mat-divider></mat-divider> 

    <div fxShow="true" fxHide.lt-md="true">
    <mat-toolbar class="basic" color="basic" *ngIf="showmenu.visible1" fxLayout="row" fxLayoutAlign="space-evenly start" >        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
    <mat-nav-list >
        <button mat-raised-button  routerLink='Espace/home' routerLinkActive="active" >
    <mat-icon>home</mat-icon><br/>HOME</button>

    <button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon>explore</mat-icon><br/>SPACE SURVEY</button>

        <button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'>
    <mat-icon>account_box</mat-icon><br/>SPACE ADMIN</button>

        <button mat-raised-button  >
    <mat-icon>assignment</mat-icon><br/>REPORTS</button>

        <button mat-raised-button  >
    <mat-icon>supervisor_account</mat-icon><br/>JOINT USE</button>

    <button mat-raised-button >
    <mat-icon>help_outline</mat-icon><br/>HELP</button>

        </mat-nav-list>
    </mat-toolbar>
    </div> 
    </div>
    <div *ngIf="showmenu.visible1" fxShow="true" fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="start none" 
      style="font-weight: bold;font-size: 18px;color: darkblue;padding: 15px 0 0 5px; ">MENU

      <a  (click)="sidenav.toggle()"><mat-icon  style="-webkit-text-fill-color:darkblue;padding: 0 0 0 1px; ">keyboard_arrow_right</mat-icon> </a>

    </div>

  <mat-sidenav-container fxFlexFill class="example-container" >
    <mat-sidenav #sidenav fxLayout="column">
    <div fxLayout="column" fxLayoutAlign="center start">
    <mat-nav-list >

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">home</mat-icon><p class="tabs">HOME<p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">explore</mat-icon><p class="tabs">SPACE SURVEY</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">account_box</mat-icon><p class="tabs">SPACE ADMIN</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">assignment</mat-icon><p class="tabs">REPORTS</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">supervisor_account</mat-icon><p class="tabs">JOINT USE</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">help_outline</mat-icon><p class="tabs">HELP</p></a>

    <a mat-list-item  (click)="sidenav.toggle()" >
    <mat-icon  style="-webkit-text-fill-color:red;font-size: 18px;font-weight: bold; padding-left: 3px;">keyboard_arrow_left</mat-icon></a>

    </mat-nav-list>
      </div>
    </mat-sidenav>


  <mat-toolbar *ngIf="showmenu.visible1" style="height:1vh;background: darkblue;"></mat-toolbar>

  <router-outlet></router-outlet>

  </mat-sidenav-container>

app.component.css

.mat-toolbar{
  height: 5vh;
}

.basic{
    height: 12vh;
}

.span{
   font-family:Georgia, serif;
     font-style:Italic;
     font-size:20px;
}

h6{
    color:white;
    font-size:12px;
    font-weight:bold;
    font-family: Verdana, sans-serif;
}

.mat-raised-button{
    border-radius:20px;
    max-height:10vh;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: #6A5ACD;
}

.mat-icon {
    transform: scale(1.5);
}

.mat-sidenav{
    background: darkblue;
}

.tabs{
    padding-left: 5px;
    color: white;
    font-size: 12px;
    font-family:  Verdana, sans-serif;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import {ShowmenuService} from './showmenu.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {
  title = 'app';
  isprofile=false;
  constructor(private _router:Router, public showmenu: ShowmenuService){}

  ngOnInit(){

    this._router.navigate(['login']);

  }


}

任何人都可以帮助我正确实施我的固定 header 吗？

Answer 1

只需复制并粘贴此代码而不是您的代码，让我知道发生了什么:(

<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"><span class="span">Rockefeller FY 2009</span></h2>
</mat-toolbar>    

<mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center">
  <h2  *ngIf="showmenu.visible1"> <span class="span">AUG-SEP</span></h2>
</mat-toolbar>    

<mat-toolbar *ngIf="showmenu.visible1"  fxLayout="column" fxLayoutAlign="space-around start" 
              style="background: darkblue;height: 3vh;">
    <h6>Web-Based Space Survey Application </h6>
</mat-toolbar>


<mat-divider></mat-divider> 

    <div fxShow="true" fxHide.lt-md="true">
    <mat-toolbar class="basic" color="basic" *ngIf="showmenu.visible1" fxLayout="row" fxLayoutAlign="space-evenly start" >        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
    <mat-nav-list >
        <button mat-raised-button  routerLink='Espace/home' routerLinkActive="active" >
    <mat-icon>home</mat-icon><br/>HOME</button>

    <button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon>explore</mat-icon><br/>SPACE SURVEY</button>

        <button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'>
    <mat-icon>account_box</mat-icon><br/>SPACE ADMIN</button>

        <button mat-raised-button  >
    <mat-icon>assignment</mat-icon><br/>REPORTS</button>

        <button mat-raised-button  >
    <mat-icon>supervisor_account</mat-icon><br/>JOINT USE</button>

    <button mat-raised-button >
    <mat-icon>help_outline</mat-icon><br/>HELP</button>

        </mat-nav-list>
    </mat-toolbar>
    </div> 
    <div  *ngIf="showmenu.visible1" fxShow="true" fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="start none" 
      style="font-weight: bold;font-size: 18px;color: darkblue;padding: 15px 0 0 5px; ">MENU

      <a  (click)="sidenav.toggle()"><mat-icon  style="-webkit-text-fill-color:darkblue;padding: 0 0 0 1px; ">keyboard_arrow_right</mat-icon> </a>

    </div>
  <div>
  <mat-sidenav-container fxFlexFill class="example-container" >
    <mat-sidenav #sidenav fxLayout="column">
    <div fxLayout="column" fxLayoutAlign="center start">
    <mat-nav-list >

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">home</mat-icon><p class="tabs">HOME<p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">explore</mat-icon><p class="tabs">SPACE SURVEY</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">account_box</mat-icon><p class="tabs">SPACE ADMIN</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">assignment</mat-icon><p class="tabs">REPORTS</p></a>

    <a mat-list-item routerLink='Espace/home' routerLinkActive="active"> 
    <mat-icon  style="-webkit-text-fill-color:deeppink;">supervisor_account</mat-icon><p class="tabs">JOINT USE</p></a>

    <a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
    <mat-icon  style="-webkit-text-fill-color:deeppink; ">help_outline</mat-icon><p class="tabs">HELP</p></a>

    <a mat-list-item  (click)="sidenav.toggle()" >
    <mat-icon  style="-webkit-text-fill-color:red;font-size: 18px;font-weight: bold; padding-left: 3px;">keyboard_arrow_left</mat-icon></a>    
    </mat-nav-list>
      </div>
    </mat-sidenav>      
  <mat-toolbar *ngIf="showmenu.visible1" style="height:1vh;background: darkblue;"></mat-toolbar>
 <div style="overflow: auto;  position: absolute;  bottom:0;  left:0;  right:0;  top:64px;">
  <div style="padding-top:2em;padding-bottom:2em;">
  <router-outlet></router-outlet>
  </div>
  </div>      
  </mat-sidenav-container>

Answer 2

可按如下方式进行：

.toolbar {
   background-color: mat-color($nga-background, card);
   position: sticky;
   position: -webkit-sticky; /* For macOS/iOS Safari */
   top: 0; /* Sets the sticky toolbar to be on top */
   z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
 }

修复了 header 使用 angular material 和 flex 布局

Fixed header using angular material and flex layout

angular

angular-material

angular-flex-layout

下图是我的app.component.html

app.component.css

app.component.ts