47

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でこれを達成するためのより良い方法があれば、アドバイスをいただければ幸いです。

4

6 に答える 6

64

が実際の DOM オブジェクトであるgetBoundingClientRect場合に使用します。$el

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

JSFiddle

フィドルは、これがjqueryのオフセットトップが与えるのと同じ値を取得することを示します

編集：コメントで述べたように、これはスクロールされたコンテンツを考慮していません。以下は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
        };
    }
}
于 2013-09-23T06:50:25.207 に答える
48

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 };
}
于 2015-03-04T14:41:24.493 に答える
0

element[0].scrollTop を試すことができます。私の意見では、このソリューションの方が高速です。

ここにもっと大きな例があります - http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html

于 2014-09-02T13:13:51.203 に答える