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

5
votes

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?

2
angularangular-materialangular-flex-layout
link does not work – ashfaq.p
Try setting position: relative; to the wrapper of your content – Luckyfella
@Luckyfella... no its not working for me... its even scrolling the header – Heena
Äh, sorry: just saw your header need position: fixed; not sticky. Then it should work – Luckyfella
@Luckyfella... no... now my header isn't visible in my home page – Heena

2 Answers

0
votes

Increase your z-index to the following:

z-index: 998;
-1
votes

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