我如何获得一个元素的偏移量（）。最高值，而无需使用jQuery的？ [英] How do I get the offset().top value of an element without using jQuery?

问题描述

我用编程的角度框架单页的应用程序。我是新来的吧。我读过<一个href=\"http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1\">this引导来帮助我了解jQuery和角和我之间的根本区别愿意遵循这一指导尽可能和NOT使用jQuery。

I'm programming a single-page application using the Angular framework. I'm new to it. I've read this guide to help me understand the fundamental differences between jQuery and Angular and I'd like to follow this guidance as much as possible and NOT use jQuery.

除的jQuery有助于获得周围的一些浏览器兼容的，并且提供的功能的有用的库，例如能够知道一个元件从窗口顶部的顶部位置，如在 $（ 元素）。偏移（）。顶部。没有普通的JavaScript似乎能够接近而不需要重写这个功能，此时就不是的是的一个更好的主意，用一个jQuery或类似的jQuery库？

Except that jQuery helps get around some of the browser incompatibilities and provides a useful library of functions, like being able to know the top position of an element from the top of the window, as in $('element').offset().top. No plain Javascript seems to be able to come close without rewriting this function, at which point wouldn't it be a better idea to use a jQuery or jQuery like library?

具体来说，我想要做的是设置了，一旦它的顶部滚动到窗口中的某个位置就位固定元素的指令。这里是什么样子：

Specifically, what I'm trying to do is set up a directive that fixes an element in place once the top of it is scrolled to a certain position in the window. Here's what it looks like:

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

        }
    }
}

如果有一个更好的方式来实现这一点的角度，我仍然只是没有得到，我AP preciate的意见。

If there's a much better way to achieve this in Angular that I'm still just not getting, I'd appreciate the advice.

推荐答案

使用<一个href=\"https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect\"><$c$c>getBoundingClientRect如果 $ EL 是实际的DOM对象：

use getBoundingClientRect if $el is the actual DOM object:

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

<击> 的jsfiddle

小提琴将表明，这将得到相同的值，jQuery的偏移最高会给您

Fiddle will show that this will get the same value that jquery's offset top will give you

修改：在本注释不占滚动的内容中提到，下面是code是jQuery使用

Edit: as mentioned in comments this does not account for scrolled content, below is the code that jQuery uses

<一个href=\"https://github.com/jquery/jquery/blob/master/src/offset.js\">https://github.com/jquery/jquery/blob/master/src/offset.js （2015年5月13日）

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的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！