gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 21:27:53 24 4
gpt4 key购买 nike

我正在使用 Angular 框架编写一个单页应用程序。我是新手。我读过this guide帮助我理解 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 中实现这一目标,我将不胜感激。

最佳答案

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

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

<罢工> JSFiddle

<罢工>

Fiddle 将显示这将获得与 jquery 的 offset top 给你的相同的值

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

关于jquery - 如何在不使用 jQuery 的情况下获取元素的 offset().top 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18953144/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com