修复了滚动实例在angular应用程序中正常工作的问题
修复了滚动实例在angular应用程序中正常工作的问题
提问于 2018-05-21 22:53:10
我试图在我的angular应用程序中的页面上应用一个固定的标题，但有问题让它完全工作。因此，当前如果用户展开页面上的折叠并向下滚动，标题会固定，但当页面折叠或向上滚动时，标题应该是正常的。因此，我编写的代码逻辑在某个时间点上可以工作，但当所有的手风琴都打开时就会失败。我觉得this.stickyTabsOffset值设置不正确有问题。
因此，当用户向下滚动选项卡时，当它们到达窗口顶部时，标题和div (选项卡下面的黑色部分)应该会被修复。在ngAfterViewInit方法中，我调用了两个元素的getelementById和，即strategyTabs (选项卡的div)和stragegyDetails (黑色部分的div)，然后设置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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50451419
复制相关文章
相似问题