Angular4 - 在滚动超过 300 像素时更改标题样式

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


}

Answer 2

只是权衡一下这个问题，因为我今天在滚动时也有类似的愿望，即缩小/放大标题栏中的文本。很简单。

在我的header.component.ts中：

从"@angular/core"导入 { Component， HostListener， OnInit };

然后

@HostListener('window:scroll', [])
onWindowScroll() {
    const scrollOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (scrollOffset >= 120) {
        document.querySelectorAll('.controllable').forEach((c) => {
            c.classList.add('text-smaller');
            c.classList.remove('text-larger');
        });
    } else {
        document.querySelectorAll('.controllable').forEach((c) => {
            c.classList.add('text-larger');
            c.classList.remove('text-smaller');
        });
    }
}

在 HTML 中：

<span class="menu-link controllable">{{ link.label }}</span>

在 CSS 中：

.menu-link.controllable.text-larger {
    font-size: 18px;
}
.menu-link.controllable.text-smaller {
    font-size: 14px;
}