position:fixed固定后怎么获取元素坐标？前置条件：支持position: fixed的浏览器浏览目标：创建新的浮层盖住
position:fixed固定后怎么获取元素坐标？
前置条件：支持position: fixed的浏览器浏览
目标：创建新的浮层盖住 position: fixed 的浮层 ， 拉动滚动条也要盖住
代码如下：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试</title> <style type="text/css"> *{ margin:0; padding:0;} body{ background:#e1e1e1;} .f{position: fixed; top: 100px; left: 195px; z-index: 15; width:200px; height:200px; background:#fff; border:5px solid #ffba00} .f1{ position:absolute; z-index: 16; width:200px; height:200px; background:#fff; border:5px solid #000} </style></head><body> <div id="floatDiv" class="f"> 我叫floatDiv <br /> <input type="button" id="btn" value="创建一个浮层把我遮住" /> </div> <div style="width:2000px; height:4000px;"></div> <script type="text/javascript"> window.onload = function () { document.getElementById('btn').onclick = function () { var fdiv = document.getElementById('floatDiv'), posXY = getOffset(fdiv), div = document.createElement('div'), divID = 'div_' + Math.floor(Math.random() * 100 - 1); div.id = divID; div.className = 'f1'; div.style.top = posXY.y + 'px'; div.style.left = posXY.x + 'px'; div.innerHTML = '拉拉滚动条，我盖住了floatDiv浮层了？'; document.body.appendChild(div); document.body.onscroll = function () { div.style.top = getOffset(fdiv).y + 'px'; div.style.left = getOffset(fdiv).x + 'px'; }; }; }; function getScroll() { return { sLeft: document["documentElement"].scrollLeft + document["body"].scrollLeft, sTop: document["documentElement"].scrollTop + document["body"].scrollTop }; }; function getOffset(a) { var b = a.offsetLeft, top = a.offsetTop, current = a.offsetParent; while (current != null) { b += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; } return { x: b, y: top }; }; </script></body></html>[解决办法]
有什么区别吗？
fixed后是相对于当前视窗的，你需要加上视窗的scrollTop和scrollLeft
而且你加了xhtml声明，document.body.onscroll要修改为document.documentElement.onscroll
简单点就给window加onscroll
- JScript code
window.onscroll = function () { div.style.top = getOffset(fdiv).y + 'px'; div.style.left = getOffset(fdiv).x + 'px'; };function getOffset(a) { var b = a.offsetLeft, top = a.offsetTop, current = a.offsetParent,scroll=getScroll(); while (current != null) { b += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; } return { x: b+scroll.sLeft, y: top +scroll.sTop}; };