How to get in Angular2 the offSetTop of an element without using jQuery

Question

I'm trying to create a directive that will fadeIn a photo slowly when an element is made visible. To do so, my first idea is comparing the position of an item regarding to the top (also checking the height of the window). But I can find how to do that with Angular2.

This is my code so far:

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
    selector: '[fadeInPhoto]',
    host: {
        '(window:scroll)': 'onScroll()'
    }
})
export class FadeInPhotoDirective{
    private scrollTop: number;
    private initialClass: string;
    constructor(private _el: ElementRef, private _renderer: Renderer){
        this.initialClass = 'thumbnail';
    }

    onScroll(){
        console.log('Photo top:', this._el);
    }
}

But this._el doesn't seem to have any method or property that contains that information.

score 29 · Answer 1 · edited May 23 '17 at 11:47

29

"offsetTop is relative to it's place in the document, not relative to the view port." -See link below

I was able to get the ACTUAL offsetTop from the top of the document using:

this.element.nativeElement.getBoundingClientRect().top

See: https://stackoverflow.com/a/40877754/1742393

edited May 23 '17 at 11:47

Community

1
1

answered May 16 '17 at 18:19

rbj325

954
8
17

Günter Zöchbauer · Answer 2 · 2017-05-17T03:18:03.647

13

The Renderer provides a selection of methods but AFAIK offsetTop is not one of them (they are all just to set values, not to get ones).

You can use instead:

this._el.nativeElement.offsetTop

edited May 17 '17 at 03:18

answered Mar 09 '16 at 18:43

Günter Zöchbauer

623,577
216
2,003
1,567

4

for some reason it always returns 0. The element is at the bottom of the page (not visible yet), and after scrolling the element is visible... but the offSetTop always returns 0 – Fabiot Mar 10 '16 at 09:13
Can you create a Plunker? – Günter Zöchbauer Mar 10 '16 at 09:15
1

I'll try and I'll paste it here – Fabiot Mar 10 '16 at 14:05
@Fabiot try getting the offset in the ngOnInit method that you can implement – Nige Mar 10 '16 at 15:50
I have this exact same issue as @Fabiot. My ```private elementRef: ElementRef``` offsetTop is always 0. – Kunepro May 29 '17 at 15:37
Anyone who is always seeing 0, see my answer and it will fix your issue. – rbj325 Jul 18 '17 at 02:38

score 1 · Answer 3 · answered Oct 03 '17 at 08:00

Try to do it like this:

make sure to declare the element into the constructor, as "private":

constructor(private el: ElementRef) { ...}
make sure you get the offsetTop after the element(s) already exist on the page:

ngAfterViewInit() { console.log('el.nativeElement: ', this.el.nativeElement.offsetTop); }

Zahra Shokrian · Answer 4 · 2018-06-23T14:51:05.530

Try using a refrence in your template instead:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div> <img src="../pic1"></div>
    <div> <img src="../pic2"></div>
    <div> <img src="../pic3"></div>

</div>

And use the ref name as the argument:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

don't Forgot to mention that any view child thus declared is only available after the view is initialized. The first time this happens is in ngAfterViewInit (import and implement the AfterViewInit interface).

then in your template just call the method like this:

<div class="arrow " (click)="topArrowEffect()"  ></div>

and in your controller your method should be like this:

topArrowEffect(){
        this.galleryContainer.nativeElement.scrollTop =10;
}

score 0 · Answer 5 · answered Mar 09 '16 at 19:07

0

I think you should be able to access it like this:

this._el.nativeElement.offsetTop

answered Mar 09 '16 at 19:07

Nige

1,206
2
10
21

score 0 · Answer 6 · answered Sep 21 '18 at 14:01

in html:

<div (click)="getPosition($event)">xxx</div>

in typescript:

getPosition(event){
    let offsetLeft = 0;
    let offsetTop = 0;

    let el = event.srcElement;

    while(el){
        offsetLeft += el.offsetLeft;
        offsetTop += el.offsetTop;
        el = el.parentElement;
    }
    return { offsetTop:offsetTop , offsetLeft:offsetLeft }
}

score 0 · Answer 7 · answered May 30 '19 at 19:58

Try to do it like this:

import { Component, OnInit, HostListener, ViewChild } from '@angular/core';


    @ViewChild("pageMenu")
      menuStickyElement;

     @HostListener("window:scroll", [])
      sticklyMenu() {
        // Get top height 
        this. offsetTop = document.documentElement.scrollTop
        if (document.documentElement.scrollTop >= this.menuStickyElement.nativeElement.offsetTop) {
          this.stickyNavMenu = true;
        } else {
          this.stickyNavMenu = false;
        }
      }

How to get in Angular2 the offSetTop of an element without using jQuery

7 Answers7