Question

我试图在滚动事件时使导航栏具有“固定顶部”类，并在页面顶部将其删除。

我在下面编写了脚本，但是没有用。

import { Component, OnInit, AfterContentInit } from '@angular/core';

@Component({
  selector: 'cb-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }
  ngAfterContentInit() {
    () => {
      let nav = document.getElementById('#nav');
      window.addEventListener('scroll', () => {
        if (window.scrollY > 1.5) {
            nav.classList.add("fixed-top");
            document.body.style.paddingTop = '70';
        }else {
          nav.classList.remove("fixed-top");
          document.body.style.paddingTop = '0';
        }
      });
    }
  }
}

Answer 1

您没有在ngAfterContentInit()中调用匿名函数。

我建议：

这些代码行可以在ngAfterContentInit函数中。
无论您的代码是否正常运行，在Angular中都不是正确的方式。尝试角度方式。 https://alligator.io/angular/using-renderer2/

class HeaderComponent {

  ngAfterContentInit() {
    (() => {
      let nav = document.getElementById('#nav');
      window.addEventListener('scroll', () => {
        if (window.scrollY > 1.5) {
          nav.classList.add("fixed-top");
          document.body.style.paddingTop = '70';
        } else {
          nav.classList.remove("fixed-top");
          document.body.style.paddingTop = '0';
        }
      });
      console.log('Listner added');
    })()
  }
}

new HeaderComponent().ngAfterContentInit()

Answer 2

您可以使用Angular CDK import，然后使用scrollDispatcher添加/删除类。

Renderer2

如何使用滚动事件从元素中添加和删除类-Angular 7

2 个答案: