获取页面元素到屏幕窗口的绝对距离。//也就是 元素的死距离。
元素的绝对位置.png
function getAbsPoint(e)
{
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
return {'x': x, 'y': y};
};
如果想获得该元素到屏幕顶部的动态距离，需要监听window的scrollTop的值 减去滚动距离就是元素当前到窗口的 动态距离。
JQ的封装尼普浏览器兼容性问题。
我写的网站实例。
http://homedoctor.xieshoue.org/help/manual.html
function getAbsPoint(e) {
var x = e.offsetLeft;
var y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
return {
'x': x,
'y': y
};
};
var $aH5tag_r = $('.block_small').find('h5');
var abs_y = [];
var $aH5tag_l = $('.help_sidebar').find('h5');
for (var i = 0; i < $aH5tag_r.length; i++) {
abs_y.push(getAbsPoint($aH5tag_r[i]).y);
}
function checkTopNum(domArr) {
var _index = -1;
for (var i = 0; i < domArr.length; i++) {
if (domArr[i] - $(document).scrollTop() < 10) {
_index = i;
}
}
return _index;
}
$(window).scroll(function(event) {
if ($(document).scrollTop() <= 160) {
$('.catalogue').removeClass('scroll');
} else {
$('.catalogue').addClass('scroll');
}
$aH5tag_l.removeClass('curr');
if (checkTopNum(abs_y) >= 0) {
$aH5tag_l.eq(checkTopNum(abs_y)).addClass('curr');
}
});
