自定义滚动-页面超出某一部分开始滚动

import { Component, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs/internal/observable/fromEvent';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  isHeadFixed:boolean = false;
  subscribeScoll:any;
  scrollDis:any = {
    _top:0
  }
  constructor() { }

  ngOnInit() {
    this.onWindowScroll();//调用
    this.subscribeScoll = fromEvent(window, 'scroll')
    .subscribe((event) => {
        this.onWindowScroll();//调用
    });
  }
  /**
   * 监听窗口滚动
   */
  onWindowScroll(){
    this.scrollDis._top = this.scollPostion().top;
    // 判断是否超出视频高度
    const bannerHeight = document.getElementsByClassName('banner')[0].clientHeight;
    if(this.scrollDis._top >= bannerHeight) {
      this.isHeadFixed = true;
    }else{
      this.isHeadFixed = false;
    }
  }
  /**
   * 窗口滚动值
   */
  scollPostion() {
    let t, l, w, h;
    if (document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
        l = document.documentElement.scrollLeft;
        w = document.documentElement.scrollWidth;
        h = document.documentElement.scrollHeight;
    } else if (document.body) {
        t = document.body.scrollTop;
        l = document.body.scrollLeft;
        w = document.body.scrollWidth;
        h = document.body.scrollHeight;
    }
    return {
        top: t,
        left: l,
        width: w,
        height: h
    };
  }
}