网页元素随滚动动态定位-CSDN博客

本文链接：https://blog.csdn.net/koukou0419/article/details/80704143

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		.div1{
			width:80px;
			height:200px;
			background-color: green;
			position:absolute;
			right:0;
			bottom:0;
		}
    
    /*.div2{
			width:1px;
			height:500px;
			margin-top: 0px;
			position:absolute;
			left:500px;
			top:0px;
			background-color: black;
		}*/
	</style>
		
</head>
<body style="height:2000px">
	<!-- <input type="button" value="开始运动"> -->
	<div class="div1"  >
	</div>
   <div class="div2"></div>

	
	<script>

		window.onscroll=function(){
			var div1=document.getElementsByClassName('div1')[0];
			var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
			var destination=parseInt((document.documentElement.clientHeight-div1.offsetHeight)/2+scrollTop);
			startMove(destination);
			//若悬浮 在中间  则除2
			//parseInt()解决因为除2的小数问题导致物体到不了destination的位置289.5->289 ||290周围跳动


		}
		var timer=null;
		function startMove(target){
			
			var speed=0;
			var div1=document.getElementsByClassName('div1')[0];
			clearInterval(timer);
			timer=setInterval(function(){
				speed=(target-div1.offsetTop)/4;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(target==div1.offsetTop){
					clearInterval(timer);
				}else{
					div1.style.top=div1.offsetTop+speed+"px";
				}
			},10);

		}
	</script>
		
		
</body>
</html>