如何获取 angularjs 中元素的当前位置

Question

我想在滚动页面时更改用户界面，为此我想获取 div 元素的位置（顶部和底部），我如何在 angularjs 中执行此操作？在下面的代码中，我怎样才能得到 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**);

});

Answer 1

您可以在指令的 link 函数中获取 DOM 元素，并在任何需要的地方使用它

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
}

Answer 2

基本上，您可以使用两个选项来获取所需元素的 top 位置。

.offset() 这会给你元素的位置 & 可以提供 top & left 位置。但这确实是用 document 高度计算的，而不是视口高度。
.scrollTop() 是您可以获得与视口相关的高度的方法 (window)。我觉得这个很适合去

除此之外，我建议您将代码移至指令，以便更好地控制 DOM。

如何获取 angularjs 中元素的当前位置

How to get the current position of an element in angularjs

javascript

angularjs

events

dom-manipulation