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

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

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

JSFiddle

Fiddle 将显示这将获得与 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
        };
    }
}
于 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 回答
10

似乎您可以在角度元素上使用 prop 方法：

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

为我工作。有人知道这有什么缺点吗？

于 2014-10-19T07:32:34.200 回答
3

Patrick Evans 接受的解决方案没有考虑到滚动。我稍微改变了他的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

于 2014-07-08T09:43:17.943 回答
0

你可以试试 element[0].scrollTop，在我看来这个解决方案更快。

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

于 2014-09-02T13:13:51.203 回答
0

对于 Angular 2+ 来获取当前元素的偏移量（this.el.nativeElement 相当于 jquery 中的 $(this) ）：

export class MyComponent implements  OnInit {

constructor(private el: ElementRef) {}

    ngOnInit() {
      //This is the important line you can use in your function in the code
      //-------------------------------------------------------------------------- 
        let offset = this.el.nativeElement.getBoundingClientRect().top;
      //--------------------------------------------------------------------------    

        console.log(offset);
    }

}
于 2018-09-18T14:23:39.603 回答