fixed headers on scroll inst working correctly in angular application

Question

I am trying to apply a fixed header on of my pages in my angular application and having trouble to get it working completely. So currently if the user expands the accordians on the page and scrolls down, the headers get fixed but when the page is collapsed or scrolled up, the headers should be normal. So my code logic written works at one point of time but fails when all the accordians are opened. I feel there is an issue with this.stickyTabsOffset value not being set correctly.

So when the user scrolls down the tabs headers and div (black section below the tabs) should get fixed when they reach top of the window. In the ngAfterViewInit method I am getting calling the getelementById and of the two elements that is strategyTabs (div id of the tabs) and stragegyDetails (div id of the black section) and then setting this.stickyTabsOffset = this.stickyTabs.offsetTop; I have also tried the following

this.stickyTabsOffset = this.stickyTabs.offsetHeight + this.strategyDetails.offsetHeight;
this.stickyTabsOffset = this.stickyTabs.offsetTop + this.strategyDetails.offsetTop;

Screenshot when the accordians are in the closed state.

import { Component, OnInit , AfterViewInit, HostListener } from '@angular/core';

 export class ResultsComponent extends Base.ReactiveComponent implements OnInit, AfterViewInit {

    @HostListener('window:scroll', [])
        onWindowScroll() {
            if (window.pageYOffset >= this.stickyTabsOffset) {
                this.stickyTabs.classList.add('sticky');
                this.strategyDetails.classList.add('fix-Container');
            } else {
                this.stickyTabs.classList.remove('sticky');
                this.strategyDetails.classList.remove('fix-Container');
            }
        }

        ngAfterViewInit() {
            const interval = setInterval(() => {
                this.stickyTabs = document.getElementById('strategyTabs') as any;
                this.strategyDetails = document.getElementById('strategyDetails') as any;
                if (this.stickyTabs && this.stickyTabs !== 'undefined' ) {
                    this.stickyTabsOffset = this.stickyTabs.offsetTop;
                    clearInterval(interval);
                }
            }, 500);
        }
}

css

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
  }

  .fix-Container {
    position: fixed;
    top: 75px;
    z-index: 1;
  }

Answer 1

For such kind of stuff I use something like this:

// component.ts

navFixed: boolean = false;
private scrollOffset: number = 70;

@HostListener('window:scroll')
onWindowScroll() {
  this.navFixed = (window.pageYOffset 
    || document.documentElement.scrollTop 
    || document.body.scrollTop || 0
  ) > this.scrollOffset;
}

<!-- component.html -->

<header [class.fixed]="navFixed">
  <!-- Header content -->
</header>
<main>
  <router-outlet></router-outlet>
</main>

// component.scss

header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1001;  
  &.fixed {
    // Styles for a fixed header
  }
}

main {
    padding-top: 170px; // Your header height + some slack
}

Hope this helps a little :)

Answer 2

Put the header component in app.component after that add router-outlet

<div>
  <div>
    <app-header></app-header>
   </div>
   <div>
  <router-outlet></router-outlet>
   </div>
</div>

Hope this will help you.