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

【问题标题】：How can you get current positional information about an element in Angular2如何获取有关 Angular2 中元素的当前位置信息
【发布时间】：2016-11-30 07:35:24
【问题描述】：

我有导航栏的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);
}

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

【问题讨论】：

标签： angular

【解决方案1】：

offsetTop 是相对于它在文档中的位置，而不是相对于视口。

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

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

【讨论】：