position:fixed固定后如何获取元素坐标-JavaSript-爱易网页

position:fixed固定后如何获取元素坐标

日期：2014-05-16　浏览次数：20464 次

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};
        };

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

position:fixed固定后如何获取元素坐标

相关资料更多>

推荐阅读更多>