我在Angular 4应用程序中向下滚动时出现粘性标题问题。无法检测到滚动事件。
标题放在布局组件中,而我想滚动的内容放在路线组件中。这可能是问题所在吗?
这是我实现的代码。
layout.component.ts中
import { Component, OnInit, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
public navIsFixed: boolean = false;
constructor(public router: Router, @Inject(DOCUMENT) private document: any) { }
@HostListener('window:scroll', [ ])
onWindowScroll(){
const number = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
if (number > 50) {
this.navIsFixed = true;
} else if (this.navIsFixed && number < 10) {
this.navIsFixed = false;
}
}
}
在layout.component.html中
<div [class.fixed]="navIsFixed" class="header">
5条答案
按热度按时间t2a7ltrp1#
我也遇到了同样的问题,我所要做的就是确保组件元素实际上就是正在滚动的内容&它有一个值为
scroll
或auto
的overflow
属性。否则就这样工作:
j5fpnvbx2#
您的布局必须是问题的来源。只有当组件模板元素可以实际滚动时,滚动事件才起作用。
确保div的溢出属性设置为滚动。另外,更改div的尺寸,以便可以触发滚动。
为了使它工作,我建议将其设置为指令并设置为高度为100vh,宽度为100vw的div。
看看我做的这个stackblitz。
hfwmuf9z3#
这将为您提供滚动事件:
或
vwkv1x7d4#
我也有同样的问题,我把这个添加到“nav.component”:
uoifb46i5#
无法使用
scroll
,但可以使用wheel
: