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');
    }

  }




}