title: Angular 4 Scroll Element Offset Top Value
body: <p>In jQuery element.offset().top gives on fixed element current position from the document top. When I'm scrolling down it grows up when scrolling up the offset top value decreses.</p>
  
  <p>Now I need the same behavior in Angular 4, but I'm something missing, my offset top value is still the same.</p>
  
  <p>Please see the attached Plunker: <a href="https://embed.plnkr.co/3sDzpRcJMEN6lndw4MUB" rel="nofollow noreferrer">https://embed.plnkr.co/3sDzpRcJMEN6lndw4MUB</a></p>
  
  <pre><code> @Component({
    selector: '[my-app]',
    template: `
      &lt;div&gt;
        &lt;h2&gt;There is document top&lt;/h2&gt;
        &lt;div class="fixed-box" #fixedBox&gt;
          &lt;p&gt;I'm fixed box&lt;/p&gt;
          &lt;p&gt;I wanna know my offset from the document top (not viewport) in every scroll step&lt;/p&gt;
          &lt;p&gt;My current position from the document top is: {{ fixedBoxOffsetTop }}px&lt;/p&gt;
          &lt;p&gt;My current position from the document top is: {{ fixedBoxOffsetTopOtherMethod }}px&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
  })
  export class App implements OnInit {
    fixedBoxOffsetTop: number  = 0;
    fixedBoxOffsetTopOtherMethod: number = 0;
  
    @ViewChild('fixedBox') fixedBox: ElementRef;
  
    constructor() {}
  
    ngOnInit() {}
  
    @HostListener("window:scroll", [])
    onWindowScroll() {
      this.fixedBoxOffsetTop = this.fixedBox.nativeElement.offsetTop; // This value looks like init value and doesn't change during scroll
      this.fixedBoxOffsetTopOtherMethod = this.fixedBox.nativeElement.getBoundingClientRect().top; // The same result as offsetTop
    }
  }
  </code></pre>
  
  <p>Can anybody help?</p>