如何获得不使用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