如何在不使用jQuery的情況下獲得元素的offset（）。top值？

Question

我正在使用Angular框架編寫單頁面應用程序。我是新手。我讀過this guide來幫助我理解jQuery和Angular之間的根本區別，我希望儘可能地遵循這個指導，而不是使用jQuery。

除了jQuery有助於解決瀏覽器的一些不兼容問題，並提供了一個有用的函數庫，如能夠從窗口頂部知道元素的頂部位置，如$('element').offset().top。沒有簡單的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'); 
       } 
      }) 

     } 
    } 
} 

如果有一個更好的方法來實現這一目標的角度說，我仍然只是沒有得到，我會很感激的建議。

Answer 1

使用getBoundingClientRect如果$el是實際的DOM對象：

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

JSFiddle

小提琴將表明，這將得到jQuery的偏離相同的值頂部會給你

編輯：正如評論中所提到的，這不包含滾動內容，下面是代碼th在jQuery使用

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

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 
     }; 
    } 
} 

Answer 2

由Patrick埃文斯接受的解決方案沒有考慮滾動考慮。 我已經稍微改變了他的jsfiddle證明這一點：

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

Answer 3

你可以嘗試element [0] .scrollTop，在我看來這個解決方案更快。

在這裏，你有更大的例子 - http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html

Answer 4

看來你可以只使用道具方法角元素：

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

爲我工作。有沒有人知道這個缺點？

Answer 5

這裏是一個函數，將做沒有jQuery的：

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 }; 
}