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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (63)

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

在添加router-outlet后,将标头组件放在app.component中

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

希望这会帮助你。

用户回答回答于

如果您不需要支持IE,您可以position: sticky在CSS中使用

以下是一个示例:https: //www.w3schools.com/cssref/tryit.asp?filename = trycss_position_sticky

所属标签

可能回答问题的人

  • gulu丶咕噜

    0 粉丝1 提问5 回答
  • EatRice

    16 粉丝0 提问4 回答
  • 华讯云

    0 粉丝0 提问4 回答
  • 御姐万岁

    6 粉丝508 提问3 回答

扫码关注云+社区

领取腾讯云代金券