您的位置：首页 > 其它

实现DIV相对于浏览器固定位置不变

2013-12-04 10:03 218 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
<head>
<title>Anchor Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script>
function top(){
window.scrollTo(0,0);
}

function bottom(){
//scrollHeight属性是获取对象的滚动高度。
window.scrollTo(0,document.body.scrollHeight);
}

function left(){
//alert("left");alert(document.body.scrollLeft)
var left = 0-document.body.scrollWidth;//向左移动的像素
window.scrollBy(left,0 );
}

function right(){
//alert(document.body.scrollWidth);
//整个滚动条的宽度
window.scrollBy(document.body.scrollWidth,0);
}

function init(){
var init_pos=oLayer.style.posTop ;
var init_left=oLayer.style.posLeft;

document.body.onscroll=function(){
//document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
oLayer.style.posTop=document.body.scrollTop+init_pos;
//scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
oLayer.style.posLeft=document.body.scrollLeft +init_left;
}
}

</script>
</head>
<body onload="init()">
<a onclick="bottom()">置底</a>
<div id="oLayer" style="position:absolute;left:120;top:60;z-index:2;background:green;width:120px;height:120px"> ddddd
</div>

<br>
<a onclick="right()">置 右</a>
<div style="width:1500px;height:30px;float:left">width="2000px"</div>
<a style="float:right" onclick="left()">置 左</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a onclick="top()">置 顶</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航