在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 …Run Code Online (Sandbox Code Playgroud)