如何获得有关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 是相对于它在文档中的位置,而不是相对于视图端口.

请参阅如何获取元素相对于浏览器窗口的顶部位置？如何获得滚动位置.

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