问如何检查元素在视角2上的位置？

EN

bower install jQuery-viewport-checker

"scripts": [
      "../bower_components/jquery/dist/jquery.min.js",
      "../bower_components/jQuery-viewport-checker/dist/jquery.viewportchecker.min.js"
  ]

import { Component, OnInit } from '@angular/core';
declare var $:any;

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

 ngOnInit(){

        $(document).ready(function(){
        $("p").click(function(){
        $(this).hide();
    });
    });


        $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 }

}

jQuery(document).ready(function(){ 
      $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            //offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 });

export function getY(element: HTMLElement) {
  let y = element.offsetTop;

  while (element.offsetParent && element.offsetParent != document.body) {
    element = <HTMLElement>element.offsetParent;
    y += element.offsetTop;
  }
  return y;
}

export function getElementOnScreen(selector: string, delta: number = 0.3): any {
  let windowH = self.innerHeight;
  let windowY = self.pageYOffset;
  let margin = windowH * delta;

  return Array
    .from(document.querySelectorAll(selector))
    .find(el => {
      let elementY = getY(el as HTMLElement);
      let elementH = el.clientHeight;

      let topOnScreen = (elementY - windowY) <= margin;
      let bottomOnScreen = (windowY + margin) <= (elementY + elementH);

      return topOnScreen && bottomOnScreen;
    });
}

export function onScreen$(selector: string): Observable<boolean> {
  return Observable
    .fromEvent(window, 'scroll')
    .throttleTime(100)
    .map(event => getElementOnScreen(selector))

    .do(element => call.api(element))

    .map(Boolean)
    .distinctUntilChanged()
}

<div id="test" [class.i-am-in-viewport]="onScreen$('div#test') |async" />