如何解决如何在不使用jQuery的情况下获取元素的offsettop值?
使用getBoundingClientRect
if $el
是实际的DOM对象:
var top = $el.getBoundingClientRect().top;
小提琴将显示这将获得与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
};
}
}
解决方法
我正在使用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中有更好的方法来实现这一点,而我仍然没有得到,我将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。