本脚本可以把指定的内容始终固定在指定的位置,及时滚动条来回滚动也不影响内容的坐标位置
查看演示页面 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> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
本范例中ID为staticcontent的DIV会始终保持在左上角,及时滚动条滚动也不会改变其位置




