Я пытаюсь применить фиксированный заголовок на своих страницах в своем угловом приложении и иметь проблемы с его работой. Итак, если пользователь расширяет аккорды на странице и прокручивает вниз, заголовки фиксируются, но когда страница свертывается или прокручивается, заголовки должны быть нормальными. Таким образом, моя логика кода написана в один момент времени, но не удается, когда все аккорды открыты. Я чувствую, что проблема с этим значением this.stickyTabsOffset не устанавливается правильно.
Поэтому, когда пользователь прокручивает заголовки вкладок и div (черный раздел под вкладками), они должны фиксироваться, когда они достигают вершины окна. В методе ngAfterViewInit я получаю вызов getelementById и двух элементов, которые являются StrategyTabs (div id вкладок) и stragegyDetails (div id черной секции), а затем устанавливают this.stickyTabsOffset = this.stickyTabs.offsetTop; Я также попробовал следующее
this.stickyTabsOffset = this.stickyTabs.offsetHeight + this.strategyDetails.offsetHeight;
this.stickyTabsOffset = this.stickyTabs.offsetTop + this.strategyDetails.offsetTop;
Снимок экрана, когда аккорды находятся в закрытом состоянии.
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;
}
