如何获得不使用jQuery的元素的offset（）。top值？

我正在使用Angular框架编写一个单页面的应用程序。 我是新来的。 我已阅读本指南以帮助我理解jQuery和Angular之间的根本区别，我希望尽可能地遵循此指南，而不要使用jQuery。

除了jQuery帮助解决一些浏览器的不兼容问题，并提供了一个有用的函数库，就像在$('element').offset().top能够知道窗口顶部元素的顶部位置一样$('element').offset().top 。 没有简单的Javascript似乎能够接近不重写这个function，在这一点上使用jQuery或jQuery像库是不是一个更好的主意？

具体来说，我试图做的是build立一个指令，修复一个元素的位置，一旦它的顶部被滚动到窗口中的某个位置。 以下是它的样子： 

 directives.scrollfix = function () { return { restrict: 'C', link: function (scope, element, $window) { var $page = angular.element(window) var $el = element[0] var elScrollTopOriginal = $($el).offset().top - 40 $page.bind('scroll', function () { var windowScrollTop = $page[0].pageYOffset var elScrollTop = $($el).offset().top if ( windowScrollTop > elScrollTop - 40) { elScrollTopOriginal = elScrollTop - 40 element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px'); } else if ( windowScrollTop < elScrollTopOriginal) { element.css('position', 'relative').css('top', '0').css('margin-left', '0'); } }) } } }

如果在Angular中有更好的方法来实现这一点，我还没有得到，我会很感激的build议。

如果$el是实际的DOM对象，请使用getBoundingClientRect ： 

 var top = $el.getBoundingClientRect().top;

的jsfiddle

小提琴会显示，这将得到相同的价值，jQuery的偏移顶部会给你

编辑 ：正如在评论中提到的这不包括滚动的内容，下面是jQuery使用的代码

https://github.com/jquery/jquery/blob/master/src/offset.js（5/13/2015 ） 

 offset: function( options ) { //... var docElem, win, rect, doc, elem = this[ 0 ]; if ( !elem ) { return; } rect = elem.getBoundingClientRect(); // Make sure element is not hidden (display: none) or disconnected if ( rect.width || rect.height || elem.getClientRects().length ) { doc = elem.ownerDocument; win = getWindow( doc ); docElem = doc.documentElement; return { top: rect.top + win.pageYOffset - docElem.clientTop, left: rect.left + win.pageXOffset - docElem.clientLeft }; } }

这是一个没有jQuery的function： 

 function getElementOffset(element) { var de = document.documentElement; var box = element.getBoundingClientRect(); var top = box.top + window.pageYOffset - de.clientTop; var left = box.left + window.pageXOffset - de.clientLeft; return { top: top, left: left }; }

似乎你可以在angular元素上使用prop方法： 

 var top = $el.prop('offsetTop');

为我工作。 有没有人知道这个缺点？

Patrick Evans接受的解决scheme不考虑滚动。 我稍微改变了他的jsfiddle来certificate这一点：

CSS：添加一些随机高度，以确保我们有一些空间滚动 

 body{height:3000px;}

js：设置一些滚动位置 

 jQuery(window).scrollTop(100);

结果两个报告的值现在有所不同： http : //jsfiddle.net/sNLMe/66/

更新2015年2月14日

有一个jqLit​​e等待的拉取请求，包括它自己的偏移方法（注意当前的滚动位置）。 看看你想自己实现它的源代码： https ： //github.com/angular/angular.js/pull/3799/files

你可以尝试元素[0] .scrollTop，在我看来这个解决scheme更快。

这里有更大的例子 – http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html

Interesting Posts