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;
}