javascript - Angular4 - 滚动超过 300px 时更改标题样式

Question

我是 angular4 的新手，我正在寻找任何解释滚动的教程。正如标题所述，我想在第二次经过特定位置时更改标题的 css 属性

如有任何帮助，我们将不胜感激。我完全不知道从哪里开始

Answer 1

我就是这样做的。

import { Component, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material';
import { HostListener, Inject } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

declare const window: any;

@Component({
    selector: 'app-client-product-prev',
    templateUrl: './client-product-prev.component.html',
    styleUrls: ['./client-product-prev.component.css'],
})

export class IndexComponent implements OnInit {

  constructor(){

  }

  ngOnInit() {}


  // ===========================================================================
  // TRY THIS
  // ===========================================================================
  @HostListener("window:scroll", [])
  onWindowScroll() {

    const number = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (number > 100) {
      console.log('You are 100px from the top to bottom');
    } else if (number > 500) {
        console.log('You are 500px from the top to bottom');
    }

  }




}