我正在使用Angular框架编写单页应用程序。我是新来的。我已经阅读了本指南,以帮助我了解jQuery和Angular之间的根本区别,并且我想尽可能地遵循本指南,而不使用jQuery。
除了jQuery可以解决一些浏览器不兼容问题之外,并提供有用的函数库,例如能够从窗口顶部知道元素的顶部位置,如$('element').offset().top。没有普通的JavaScript似乎能够接近而不需要重写这个功能,在这一点岂不_是_ 一个更好的主意,用一个jQuery或类似的jQuery库?
$('element').offset().top
具体来说,我要尝试做的是设置一条指令,一旦该指令的顶部滚动到窗口中的某个位置,该指令便会将其固定在适当的位置。看起来是这样的:
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中有更好的方法来实现这一点,而我仍然没有得到,我将不胜感激。
使用getBoundingClientRectif $el是实际的DOM对象:
getBoundingClientRect
$el
var top = $el.getBoundingClientRect().top;
JSFiddle
小提琴将显示这将获得与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 }; } }