Implemented a fixed header but the content is scrolling over the header

匆匆过客 提交于 2019-12-23 15:39:40

问题


I am working with Angular 2 app using angular material and angular flex layout.I have created in my application a login form and a header which is only visible after login in my home page.

In my app.component.html I have added my header and applied the below style to get it fixed while scrolling.

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

In my home page I have added a mat-toolbar component,mat-card component and mat-sidenav component.

After logging in the app, when I scroll the homepage content is overlapping my fixed header and my header is getting covered with the home page content.

Please access my sample app here

Can anybody please help me in proper implementation of my fixed header?


回答1:


Try something like this

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <header>Fixed header</header>
    <main> 
      <div *ngFor="let item of items"> Content </div>
    </main>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = new Array(100)
}

app.component.css

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background-color: tomato;
}

main {
  margin-top: 56px;
  background-color: aliceblue;
}

With angular material you need to put margin-top on the mat-sidenav-content selector.

Live demo




回答2:


Increase your z-index to the following:

z-index: 998;


来源:https://stackoverflow.com/questions/49856481/implemented-a-fixed-header-but-the-content-is-scrolling-over-the-header

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!