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

问题描述

我正在使用 Angular 框架编写单页应用程序.我是新手.我读过 本指南帮助我理解 jQuery 和 Angular 之间的根本区别，我想尽可能地遵循这个指南，而不是使用 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 帮助解决一些浏览器不兼容问题并提供有用的函数库之外，例如能够从窗口顶部知道元素的顶部位置，如 $('element').offset().top.如果不重写这个函数，任何普通的 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');
                }
            })

        }
    }
}

如果在 Angular 中有更好的方法来实现这一点，但我仍然没有得到，我会很感激你的建议.

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

推荐答案

use getBoundingClientRect 如果 $el 是实际的 DOM 对象:

use getBoundingClientRect if $el is the actual DOM object:

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

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

编辑:如评论中所述，这不考虑滚动内容，以下是 jQuery 使用的代码

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

https://github.com/jquery/jquery/blob/master/src/offset.js (5/13/2015)

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 的情况下获取元素的 offset().top 值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！