Create Sticky Header in Angular

In this blog we are going to see how to develop a sticky header in Angular. The idea is when user scrolls past the header we want it to stick to the top and we want it to be reusable. I should be able to make any element stick. You can use this for a sticky menu, shopping button and more.

We are going to create a very simple angular project so that I can demonstrate the concept. Let me explain how this will be accomplished before diving into code. We need to monitor the document scroll position and this will be done in a custom directive that will be attached to the element we want to stick which in our case is the H1 tag. We will be utilizing Attribute directive since we want to change the behavior of DOM element. There is also structural directive but they serve a different purpose. You can read more about directives on the angular site.

Let’s first create the directive and then we are going to attach it to our element. I am using Stackblitz for this demo purposes. To create a directive simply right click on the root folder and select Angular Generator > Directive

Add directive to angular in stackblitz
Add directive to angular in stackblitz

If you are using angular cli you would do: ng generate directive stickyHeader <any options>

Let’s call it stickyHeader. You should see sticky-header.directive.ts appear in the explorer. The selector is appStickyHeader. Let’s add this to our h1 element in the app-header.component.ts file.

selector: 'app-header',
template: <h1 appStickyHeader>{{name}}</h1>,
styles: [`

Tapping into document scroll event:

To tap into the document scroll event we add an event listener like this:

/* tap into the document scroll event */
document.addEventListener('scroll', () => {
<some code>
}

You can see this function in the source code. I am not going to repeat it here.

Note: you could use RxJS and simply do fromEvent(document, ‘scroll’).subscribe(() => {});

Make it sticky:

Now we need a reference to our native html element i.e. the header itself. The reference get’s injected for you by the angular framework so all we have to do is assign it to our local private element. See the constructor where we have ElementRef. Make sure to include it in the imports.

import { Directive, ElementRef } from '@angular/core';
<some code>  
constructor(el : ElementRef) {    

    this._element = el.nativeElement;
	…

Inside the scroll event listener we check if the document has scrolled pass the element and if it has we call a function to change some css. And to remove the css we simply call the reset sticky function.

The beauty of this is that we can just add the directive to any element we want to stick to the top and it will stick. See how I have created the second header and applied the directive to it and it sticks. This makes the directive very reusable. You can be creative with this and maybe add some sort of animation where the target element drops from top or fads in. You get the idea.

Leave a Reply

Your email address will not be published. Required fields are marked *