如何在不使用jQuery的情况下获取元素的offset（）。top值？

Question

我正在使用Angular框架编写单页应用程序。我是新来的。我已经阅读了本指南，以帮助我了解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');
                }
            })

        }
    }
}

如果在Angular中有更好的方法来实现这一点，而我仍然没有得到，我将不胜感激。

Answer 1

使用getBoundingClientRectif $el是实际的DOM对象：

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