div盒子的属性，没有因为事件改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1 {
				position: absolute;
				left: 100px;
				top: 100px;
			}

			img {
				width: 300px;
			}

			#btn01 {
				position: absolute;
				right: 0;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById("box1");

				var left = 0;

				var top = 0;

				if (window.getComputedStyle) {
					left = getComputedStyle(box1, null).left;
					top = getComputedStyle(box1, null).top;
				} else {
					left = box1.currentStyle.left;
					top = box1.currentStyle.top;
				}

				document.onscroll = function() {
					// box1.style.top = (document.body.scrollTop || document.documentElement.scrollTop)+"px";
					// box1.style.left = (document.body.scrollLeft || document.documentElement.scrollLeft)+"px";
					// var left=0;
					// if(window.getComputedStyle){
					// 	left = getComputedStyle(box1,null).left;
					// }else{
					// 	left = box1.currentStyle.left;
					// }
					// alert(left);


					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

					box1.style.left = parseInt(sl)+parseInt(left) +"px";
					box1.style.top = parseInt(st) + parseInt(top) + "px";
				}
			}
		</script>
	</head>
	<body style="height: 2600px; width: 3000px;">
		<div id="box1">
			<button id="btn01">×</button>
			<img src="../image/2.jpg" />
		</div>
	</body>
</html>

box1.style.left = 200 + "px";

               window.onscroll = function() {

                   var st = document.body.scrollTop || document.documentElement.scrollTop;
                   var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

                   box1.style.left = 200 + "px";
                   box1.style.top = st + parseFloat(top) + "px";
               }

首先 script放到html下面在方法里加个console.log输出left和top看看

如果有值可能就你加的滚动的问题，看看滚动有没有触发

另外可以先写固定值把效果实现再改成动态的