【发布时间】：2018-04-16 12:53:51
【问题描述】：
我正在使用 Angular 材料和 Angular flex 布局使用 Angular 2 应用程序。我在我的应用程序中创建了 登录表单 和 标题，仅在登录后可见在我的主页上。
在我的 app.component.html 中，我添加了标题并应用了以下样式以在滚动时对其进行修复。
<div style="margin-bottom:5px;
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;">
在我的主页中，我添加了 mat-toolbar 组件、mat-card 组件和 mat-sidenav 组件。
登录应用程序后，当我滚动主页内容时，我的固定标题与我的固定标题重叠，并且我的标题被主页内容覆盖。
下面显示的是我的 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']);
}
}
谁能帮我正确实施我的固定标头？
【问题讨论】：
-
请在尝试我的答案后告诉我发生了什么。请在我的回答中发表您的评论
-
@RameshRajendran.. 你能帮我解决这个问题吗......stackoverflow.com/questions/49898022/…
-
@RameshRajendran............你能帮我解决这个问题............stackoverflow.com/questions/50374160/…
标签： angular angular-material angular-flex-layout