定义元素相对于浏览器窗口的位置

如何定义元素相对于浏览器窗口的位置（坐标左上角）而不是文档？定义元素相对于浏览器窗口的位置

Crossbrowser兼容，纯JavaScript。

来源

2010-04-21 Kalinin

元件位置 - （量文档滚动）

查找一个元素的相对于文档位置：http://www.quirksmode.org/js/findpos.html

金额文档滚动：http://www.quirksmode.org/dom/w3c_cssom.html#t35（scrollLeft/scrollTop）

来源

2010-04-21 09:32:38

@Jeffery To，是的！ – Kalinin 2010-04-21 10:08:54

仅供记录：quirksmode函数不适用于固定定位元素。 – KooiInc 2010-04-21 10:09:14

@KooiInc，好的，我会记得它。 – Kalinin 2010-04-21 10:10:48

不能做AFAIK。当前文档的视口是唯一可以相对定位事物的东西。

你可以找出屏幕的可用空间，使用screen.availHeight属性，但不会给你的浏览器的左上角和文档的左上角之间的空间（这是你需要什么）。从浏览器窗口=（从文档元素的位置）

来源

2010-04-21 09:18:08

@皮卡，但有这样的属性，作为屏幕的滚动大小。 – Kalinin 2010-04-21 09:20:51

@卡琳琳你是什么意思？ – 2010-04-21 09:23:22

@Pekka，'body.scrollTop' – Kalinin 2010-04-21 09:26:54

我猜你在说'固定位置'的元素，它保持在窗口的相同位置，你滚动它？

这可以用普通的CSS来完成，而应该是是因为让浏览器比使用JavaScript管理更容易。如果您需要元素在IE6上保持不变，您只需要JS备份; IE6不支持此功能;只要你在标准模式（你应该是），更新的版本可以与CSS协同工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
    <style type="text/css"> 
     #foo { 
      position: fixed; 
      left: 100px; top: 100px; width: 200px; height: 200px; 
      background: red; 
     } 
    </style> 
</head> 
<!--[if lt IE 7]><body class="browser=ie6"><![endif]--> 
<!--[if gte IE 7]><!--><body><!--<![endif]--> 

    <div id="foo">Hello</div> 

    <script type="text/javascript"> 
     if (document.body.className=='browser=ie6') { 

      // Simple fallback `position: fixed` support for IE6. Elements to be fixed 
      // must be positioned with `px` values for `left` and `top`. 
      // 
      function PositionFixer(element) { 
       var x= parseInt(foo.currentStyle.left, 10); 
       var y= parseInt(foo.currentStyle.top, 10); 
       function fixposition() { 
        foo.style.left= x+document.documentElement.scrollLeft+'px'; 
        foo.style.top= y+document.documentElement.scrollTop+'px'; 
       } 
       window.attachEvent('onscroll', fixposition); 
       fixposition(); 
       foo.style.position= 'absolute'; 
      } 

      PositionFixer(document.getElementById('foo')); 
     } 
    </script> 
</body></html>

来源

2010-04-21 09:50:24 bobince

@bobince，我很抱歉，但我不需要页面上的元素固定。关于浏览器窗口的元素的坐标对我来说只是必需的。 – Kalinin 2010-04-21 10:06:48

定义元素相对于浏览器窗口的位置

回答

相关问题