我正在使用角度材料和角度flex布局使用Angular 2应用程序 . 我在我的应用程序中创建了一个 login form 和 a header ，只有在我的主页登录后才能看到它 .
在我的app.component.html中，我添加了我的 Headers ，并应用了下面的样式，以便在滚动时修复它 .
<div style="margin-bottom:5px;
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;">
在我的主页中，我添加了一个 mat-toolbar 组件， mat-card 组件和 mat-sidenav 组件 .
登录应用程序后，当我滚动主页内容与我的固定 Headers 重叠时，我的 Headers 将覆盖主页内容 .
下面显示的是我的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>
HOME</button>
<button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'>
<mat-icon>explore</mat-icon>
SPACE SURVEY</button>
<button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'>
<mat-icon>account_box</mat-icon>
SPACE ADMIN</button>
<button mat-raised-button >
<mat-icon>assignment</mat-icon>
REPORTS</button>
<button mat-raised-button >
<mat-icon>supervisor_account</mat-icon>
JOINT USE</button>
<button mat-raised-button >
<mat-icon>help_outline</mat-icon>
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']);
}
}
任何人都可以帮我正确实现我的固定标头吗？
1 回答
只需复制并粘贴此代码而不是你的代码，让我知道发生了什么:(