獲取頁面元素到屏幕窗口的絕對(duì)距離畴栖。//也就是 元素的死距離胡陪。
元素的絕對(duì)位置.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};
};
如果想獲得該元素到屏幕頂部的動(dòng)態(tài)距離拆挥，需要監(jiān)聽window的scrollTop的值 減去滾動(dòng)距離就是元素當(dāng)前到窗口的 動(dòng)態(tài)距離范嘱。
JQ的封裝尼普瀏覽器兼容性問題趣效。
我寫的網(wǎng)站實(shí)例。
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');
}
});
