滚动器上的固定标头在角度应用程序中正常工作

Question

我正在尝试在我的角度应用程序中对我的页面应用固定标题,并且无法使其完全正常工作.因此,当前如果用户在页面上展开手风琴并向下滚动,则标题会得到修复,但是当页面折叠或向上滚动时,标题应该是正常的.所以我编写的代码逻辑在一个时间点工作,但是当所有的手风琴都被打开时失败了.我觉得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;
  }

Answer 1

对于这样的东西，我使用类似这样的东西：

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

希望这有所帮助 ：）