小编tol*_*eza的帖子

使用@HostListener的窗口滚动事件不起作用

在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)

scroll header sticky typescript angular

6
推荐指数
2
解决办法
9765
查看次数

标签 统计

angular ×1

header ×1

scroll ×1

sticky ×1

typescript ×1