我编程使用Angular框架的单页应用程序。我是新来的。我读了
this guide，以帮助我理解jQuery和Angular之间的根本区别，我想尽可能多地遵循这个指导，不使用jQuery。
除了jQuery帮助解决一些浏览器不兼容性，并提供了一个有用的函数库，例如能够从窗口顶部知道元素的顶部位置，如$(‘element’)。offset()。最佳。没有普通的Javascript似乎能够接近没有重写这个函数，在这一点不是一个更好的主意，使用jQuery或jQuery的库？
具体来说，我想做的是设置一个指令，一旦元素的顶部被滚动到窗口中的某个位置，就将其固定到位。这是它的外观：
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，我仍然只是没有得到，我会感激的建议。
解决方法
如果$ el是实际的DOM对象，则使用
getBoundingClientRect：
var top = $el.getBoundingClientRect().top;
Fiddle将显示这将获得相同的值，jquery的offset top会给你
编辑：如评论中所述，这不考虑滚动内容，下面是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
};
}
}
