Angular 6 - CSS - STICKY Header

Before I answer your question, you may consider:

• Remove static styles from your HTML.
• Use reasonable z-index, so you won't end up with z-index of something like z-index: 100000000.
• Use !important only when there's no other choice.

Since we can't write Angular code via StackOverflow's snippets, I wrote the code using Stackblitz - https://stackblitz.com/edit/angular-ii5tnn

To make a position sticky, well, you simply use position: sticky, with additional top or bottom rule (in this case - top). For example:

mat-toolbar {  position: sticky;  top: 50px}

This way, mat-toolbar will remain at his position, until we pass it.

In my given example, I did:

• Initialized new Angular 6 and added Material Angular.
• Added mat-toolbar with [color="primary"] and set it to fixed via CSS.
• Added #frugelmap with custom height just to show it.
• Added mat-toolbar with [color="warn"] and set the sticky rules (watch below)
• Added #add-spacing with lots of lorem ipsum just do demonstrate the sticky effect.

The following CSS rules:

mat-toolbar {  --default-height: 50px;}mat-toolbar[color="primary"] {  top: 0;  position: fixed;  height: var(--default-height);}mat-toolbar[color="warn"] {  position: sticky;  top: var(--default-height);}#frugalmap {  height: 300px;  background-color: #EEE;}

To avoid the browser support concerns of position: sticky, you can easily achieve this by using ngClass to toggle sticky behaviour as:

component.html

<mat-toolbar color="primary" class="fixed-header" ></mat-toolbar><div class="custom-popup" id="frugalmap" ></div><mat-toolbar  id="secondToolbar" color="warn"  [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky}"></mat-toolbar>

usign HostListener to track scroll position as you should not use JS event handler directly in Angular:

component.ts

  isSticky: boolean = false;  @HostListener('window:scroll', ['$event'])  checkScroll() {    this.isSticky = window.pageYOffset >= 250;  }

finally adding style for our custom class sticky.

component.css

.fixed-header {  position: fixed;  z-index:999;  height: 50px;}#frugalmap {  height: 300px;  width: 100%;  top: 50px;  position: relative;}.mat-elevation-z5 {  position: relative;}.sticky {  position: fixed;  top: 50px;}

Stackblitz Demo

Since the other answer mostly rely on CSS that is not available in all browsers I'll allow myself to advertise my lib angular-sticky-things.

It has a feature that is called 'boundary element' and you can see it in action in the above link. What you do is basically you slice your page in sections (what you usually already have) and then you tell an element to be sticky within the boundaries of the parent element.

Here you can see it in action:

<div #boundary style="height:1000px;">  <div #spacer></div>  <div stickyThing [spacer]="spacer" [boundary]="boundary">    I am sticky but only inside #boundary!  </div></div>

Just install the lib, add my code and replace the div with stickyThing with a mat-toolbar. That's basically it.

npm install @w11k/angular-sticky-things