Angular 4 Scroll Element Offset Top Value

Question

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.

Now I need the same behavior in Angular 4, but I'm something missing, my offset top value is still the same.

Please see the attached 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
  }
}

Can anybody help?

You probably want to include the code in the body of your question. That link will certainly expire one day, leaving this question bereft of meaning. — user1531971
– user1531971, Commented Aug 1, 2017 at 20:29

yurzui · Accepted Answer · 2017-08-01 20:25:53Z

7

You missed window and document offsets:

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

Forked Plunker

answered Aug 1, 2017 at 20:25

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JGFMK Over a year ago

That's still not catering for window resizing... ;-)

yurzui Over a year ago

@JGFMK He does not listen resize event. See this plnkr.co/edit/PLZfad6kQZuHR3qAqxWk?p=preview

JGFMK Over a year ago

plnkr.co/edit/Z0cSqqJJXWw6dpPeHMbs?p=preview - this does and outputs it initially. I think there is a way to bind multiple events to a handler too btw - github.com/TheLarkInn/angular2-multievent-bindings-plugin/blob/…

JGFMK Over a year ago

Learnt something there - didn't realise you could more than one HostListener on a single method...

Pavel Sherin Over a year ago

Thank you, exactly what I was looking for. It's a pitty that you need for that two lines instead of one word. If somebody want one word, there is custom function: ` /** * Return element coordinates relative to document * @param element * @returns {number} */ getCurrentOffsetTop(element: ElementRef) { const rect = element.nativeElement.getBoundingClientRect(); return rect.top + window.pageYOffset - document.documentElement.clientTop; }`

Pavel Sherin · Accepted Answer · 2017-08-02 11:23:48Z

-1

There is my method for that:

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

answered Aug 2, 2017 at 11:23

Pavel Sherin

411 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular 4 Scroll Element Offset Top Value

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related