如何在不使用jQuery的情况下获得元素的offset()。top值?

我正在使用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中有更好的方法来实现这一点,我仍然没有得到,我会很感激这个建议。


如果$el是实际的DOM对象,请使用getBoundingClientRect

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

的jsfiddle

小提琴会显示这将获得相同的价值,jQuery的偏移顶部会给你

编辑 :正如评论中所提到的,这不包含滚动内容,下面是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
        };
    }
}

这是一个没有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 };
}

似乎你可以在角元素上使用prop方法:

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

适用于我。 有没有人知道这个缺点?

链接地址: http://www.djcxy.com/p/3945.html

上一篇: How do I get the offset().top value of an element without using jQuery?

下一篇: Callback of .animate() gets called twice jquery