关闭

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

246人阅读 评论(0) 收藏 举报

 

 

<!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()">置&nbsp;右</a>
	<div style="width:1500px;height:30px;float:left">width="2000px"</div>
	<a style="float:right" onclick="left()">置&nbsp;左</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()">置&nbsp;顶</a>
	</body>
</html>


 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:282150次
    • 积分:8453
    • 等级:
    • 排名:第2300名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:4条
    最新评论