我编程使用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
- };
- }
- }
