js控制div层的显示跟随滚动条滚动而滚动

最新推荐文章于 2021-08-09 14:53:31 发布

夜空中苦逼的程序员

最新推荐文章于 2021-08-09 14:53:31 发布

阅读量8.3k

点赞数

分类专栏：【Javascript】

本文链接：https://blog.csdn.net/chenghui0317/article/details/9004716

版权

【Javascript】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/9004716

js代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
  <style>
  
  .header_wrap {
    background: none repeat scroll 0 0 #488FCE;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: block;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}
ul li{
	float:left;
	margin:10px;
	padding:0px;
}
  </style>
</head>
<body style="height:1500px">

<header class="header_wrap">
	<div class="nav">
	<ul>
		<li class=""><a href="http://www.phpwind.net/index.php?m=bbs&c=forumlist">首页</a></li>
		<li class="current"><a href="http://www.phpwind.net/index.php?m=bbs">新帖</a></li>
		<li class=""><a href="http://www.phpwind.net/index.php?m=like&c=like">喜欢</a></li>
		<li class=""><a href="http://www.phpwind.net/index.php?m=tag">话题</a></li>
		<li class=""><a href="http://open.phpwind.com/" target="_blank">云平台</a></li>
		<li class=""><a href="http://www.phpwind.com/index.php?m=downloads&a=downloadsphpwind" target="_blank">下载</a></li>
	</ul>
	</div>
</header>
<!--右边-->
<div id="divRight">
	<style type="text/css">
	#divMsgInfo{
		position:absolute;
		width:90px;
		height:300px;
		font-size:9pt;
	}
	</style>
	<script type="text/javascript">
		var lastScrollY=0;
		function heartBeat(){ 
			diffY=document.documentElement.scrollTop; 
			percent=0.1*(diffY-lastScrollY); 
			if(percent>0)percent=Math.ceil(percent); 
			else percent=Math.floor(percent); 
			document.getElementById("divMsgInfo").style.top=parseInt(document.getElementById("divMsgInfo").style.top)+percent+"px";
			lastScrollY=lastScrollY+percent; 
		}
		var timeright = window.setInterval("heartBeat()",1);
	</script>

	<div id="divMsgInfo"  runat="server" style=" right:10px; top:120px;">
		<img src ="left.gif" />
		<div style="float:right; color:White"><a οnclick="clearInterval(timeright);document.getElementById('divRight').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
	</div>
</div>



<!--左边-->
<div id="divLeftFloat">
	<style type="text/css">  
	#divMsgLeftInfo{  
		position:absolute;  
		width:90px; 
		height:318px;   
		font-size:9pt;  
	}   
	</style>     
	<script type="text/javascript">   
		var lastScrollYLeft=0;  
		function heartBeatLeft(){    
			diffYLeft=document.documentElement.scrollTop;    
			percent=0.1*(diffYLeft-lastScrollYLeft);    
			if(percent>0)
				percent=Math.ceil(percent);     
			else percent=Math.floor(percent);     
			document.getElementById("divMsgLeftInfo").style.top=parseInt(document.getElementById("divMsgLeftInfo").style.top)+percent+"px";     
			lastScrollYLeft=lastScrollYLeft+percent;    
		}   
		var timeleft = window.setInterval("heartBeatLeft()",1);  
	</script>     
	<div id="divMsgLeftInfo" style=" left:10px; top:120px;">
		<a href="http://www.ispeak.cn" target="_blank">
		<img border="0" src ="/Files/index/FloatImg/20101112115620528353991.png" /></a>               
		<div style="float:right; color:White">
			<a οnclick="clearInterval(timeleft);document.getElementById('divLeftFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a>
		</div>    
	</div>  
</div>

<!--底部-->
<div id="divBottomFloat">
	<style type="text/css">
	#divMsgBottomInfo{
		position:absolute;
		/*background:#eee;*/
		width:330px;
		height:188px;
		font-size:9pt;
		/* border-color:#442200;*/
		/* border-color:#000000;*/
	}
	</style>
	<script type="text/javascript">
		var lastScrollYBottom=0;
		function heartBeatBottom(){ 
			var isIE = document.all && window.external;
			bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if(isIE){
				docHeight = document.documentElement.clientHeight || document.body.clientHeight;
			}else{
				docHeight = (document.body.clientHeight > document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientHeight;
			}
			diffYBottom=(docHeight - parseInt(document.getElementById("divMsgBottomInfo").offsetHeight,10)) + parseInt(bodyScrollTop, 10);
			document.getElementById("divMsgBottomInfo").style.top=diffYBottom+"px";
		}
		var timebottom=window.setInterval("heartBeatBottom()",1);
	</script>
	<div id="divMsgBottomInfo"  runat="server" style=" right:10px; top:500px;">
		<div style="float:right; color:White"><a οnclick="clearInterval(timebottom);document.getElementById('divBottomFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
		<img src ="/images/tmp2.jpg" style="width:330px; height:170px" />   
	</div>
</div>
</body>
</html>

夜空中苦逼的程序员

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js控制div层的显示跟随滚动条滚动而滚动

js代码如下：无标题页 .header_wrap { background: none repeat scroll 0 0 #488FCE; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: block; left: 0; position: fixed; top: 0
复制链接

扫一扫