如何获得有关Angular2中元素的当前位置信息

Question

我有导航栏的ElementRef，我正试图找出它与窗口顶部的接近程度，以便让它变得粘稠

<div class="nav-bar" #navBar>

</div>

@ViewChild("navBar")
  navBarElement;

我在滚动事件中打印出它的nativeElement的位置，但值似乎是静态的

@HostListener('window:scroll', ['$event'])
onScroll(event) {
   console.log("offset top", this.navBarElement.nativeElement.offsetTop);
}

如何跟踪元素的当前位置？

Answer 1

offsetTop与文档中的位置相关，而不是相对于视图端口。

请参阅How to get an element's top position relative to the browser's window?了解如何获取滚动位置。

例如。 var viewportOffset = el.getBoundingClientRect().top;