在jQuery中,element.offset()。top给出了来自文档顶部的固定元素当前位置。当我向下滚动时,它向上滚动时向上滚动偏移顶部值会减小。
现在我在Angular 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
}
}
有人可以帮忙吗?
答案 0 :(得分:1)
您错过了window
和document
抵消:
const rect = this.fixedBox.nativeElement.getBoundingClientRect();
this.fixedBoxOffsetTop = rect.top + window.pageYOffset - document.documentElement.clientTop;
<强> Forked Plunker 强>
答案 1 :(得分:0)
有我的方法:
getCurrentOffsetTop(element: ElementRef) {
const rect = element.nativeElement.getBoundingClientRect();
return rect.top + window.pageYOffset - document.documentElement.clientTop;
}