Windows滚动上的Angular EventListener如何工作？

Question

我试图弄清楚如何在导航页下方跟踪导航栏的位置，以便导航栏到达顶部时，它会粘在顶部，直到您返回为止。我在stackoverflow和其他示例中尝试了很多选项，但是没有运气。

这是我的代码。

import { Component, OnInit } from "@angular/core";

@Component({
selector: "app-nav",
templateUrl: "./nav.component.html",
styleUrls: ["./nav.component.css"]
 })
 export class NavComponent implements OnInit {
   constructor() {}

  ngOnInit() {}
 }

和导航组件的html

<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand">Norbert</a>

<ul class="navbar-nav mr-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" href="#about">About</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
  <span class="et-hero-tab-slider"></span>
</ul>
</div>
</nav>

 <main class="et-main">
 <section class="et-slide" id="about">
<h1>ES6</h1>
<h3>something about es6</h3>
</section>
<section class="et-slide" id="skills">
<h1>Flexbox</h1>
<h3>something about flexbox</h3>
</section>
<section class="et-slide" id="contact">
<h1>React</h1>
<h3>something about react</h3>
</section>

Answer 1

将类似的内容添加到导航组件控制器中：

@HostListener("window:scroll", [])
onWindowScroll() {
 // logic here to fix to top
}

Answer 2

Check the mdn of getBoundingClientRect

@ViewChild('ElementRefName') element: ElementRef;


@HostListener("window:scroll", [])
onWindowScroll() {
     const y = this.element.nativeElement.getBoundingClientRect().y;
}