把内容始终固定在指定位置

2009-02-12 18:25:23 | 【

本脚本可以把指定的内容始终固定在指定的位置,及时滚动条来回滚动也不影响内容的坐标位置

查看演示页面 View Demo 查看全部代码 View Code

在网页<body>区添加以下代码

<div id="staticcontent" style="position:absolute; border:1px solid black; background-color: lightyellow; width: 135px;">
This content stays afloat and always in view, even if you scroll the page.
</div>


<script type="text/javascript">
//define universal reference to "staticcontent"
var crossobj=document.all? document.all.staticcontent : document.getElementById("staticcontent")

//define reference to the body object in IE
var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

function positionit(){
//define universal dsoc left point
var dsocleft=document.all? iebody.scrollLeft : pageXOffset
//define universal dsoc top point
var dsoctop=document.all? iebody.scrollTop : pageYOffset

//if the user is using IE 4+ or Firefox/ NS6+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+5+"px" // adjust left
crossobj.style.top=dsoctop+5+"px" // adjust top
}
}
setInterval("positionit()",100)
</script>

<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>



本范例中ID为staticcontent的DIV会始终保持在左上角,及时滚动条滚动也不会改变其位置

下载"把内容始终固定在指定位置"

  • 本地下载
  • 本地下载2

相关资源