角4スクロール要素のオフセットトップ値

Question

jQueryのelement.offset（）。topでは、ドキュメントの上端から固定要素の現在位置を取得します。私がスクロールダウンしているときに、オフセットトップ値をスクロールアップすると、スクロールアップします。

今、私は角度4で同じ動作が必要ですが、私は何かが足りなくて、オフセットトップ値は同じです。

添付Plunkerを参照してください：https://embed.plnkr.co/3sDzpRcJMEN6lndw4MUB

@Component({ 
    selector: '[my-app]', 
    template: ` 
    <div> 
     <h2>There is document top</h2> 
     <div class="fixed-box" #fixedBox> 
     <p>I'm fixed box</p> 
     <p>I wanna know my offset from the document top (not viewport) in every scroll step</p> 
     <p>My current position from the document top is: {{ fixedBoxOffsetTop }}px</p> 
     <p>My current position from the document top is: {{ fixedBoxOffsetTopOtherMethod }}px</p> 
     </div> 
    </div> 
    `, 
}) 
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 
    } 
} 

誰も助けることができますか？

Answer 1

あなたがwindowとdocumentオフセット逃した：それは私の方法があります

const rect = this.fixedBox.nativeElement.getBoundingClientRect(); 
this.fixedBoxOffsetTop = rect.top + window.pageYOffset - document.documentElement.clientTop; 

Forked Plunker

Answer 2

を：

getCurrentOffsetTop(element: ElementRef) { 
    const rect = element.nativeElement.getBoundingClientRect(); 
    return rect.top + window.pageYOffset - document.documentElement.clientTop; 
}