How to get the current position of an element in angularjs

Question

I want to change the user interface on scrolling the page, and for that i want to get the position of div element (top and bottom), how can i do this in angularjs ? In the following code how can i get the top_position?

var w=angular.element($window);

w.bind('scroll', function(){

    var top_div=angular.element($('#top-div'));
    // now here what function should i use ?
    console.log("the top of the div having id top-div:"+**top_position**);

});

What is the problem with current code? you only need to use `top_div.offset().top` should work if jQuery has been loaded before angularjs — Pankaj Parkar, Jan 30 '16 at 11:16
@PankajParkar, "top_div.offset().top" is producing the same value even i am scrolling. But as i am scrolling the value of the top should change. — PRASHANT KUMAR, Jan 30 '16 at 11:34
It calculate that with respective to document.. You need to calculate it with respect to window? — Pankaj Parkar, Jan 30 '16 at 12:00
@PankajParkar, and how can i do this, i mean how can i calculate with respect to window ? — PRASHANT KUMAR, Jan 30 '16 at 12:03
`.scrollTop()` will be the correct method go, which returns `offset` respect to window. — Pankaj Parkar, Jan 30 '16 at 12:06
Thanks Mr. @PankajParkar, your answer is helpful, finally problem is solved. — PRASHANT KUMAR, Jan 30 '16 at 12:14

score 4 · Answer 1 · answered Jan 30 '16 at 10:45

you can get the DOM element in a link function of your directive and do with it wherever you want

scope: {...},
restrict: 'AE',
controller: function() {},
link: function($scope, elem, attrs) {
   var el = elem[0]; // elem - jQLite element, el - native DOM element
   console.log(el.getBoundingClientRect()); // the bounding rect of the element
}

score 2 · Accepted Answer · answered Jan 30 '16 at 13:03

Basically you could use two options to get top position of desired element.

.offset() which will give you position of element & can provide top & left position. But that does calculate with document height, not with the view-port height.
.scrollTop() is method by you can get height relate to viewport(window). I think this is suitable thing to go.

Other than that I'd suggest you to move your code to directive, so that you can get better control over that DOM.

How to get the current position of an element in angularjs

2 Answers2