NSLCJ_wzqdnzqst
NSLCJ_wzqdnzqst
采纳率0%
2021-03-02 17:25

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • qq_36911145 封印di恶魔 1月前

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

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

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

    点赞 1 评论 复制链接分享
  • jslang 天际的海浪 1月前

                    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";
                    }
     

    点赞 1 评论 复制链接分享
  • Mliangydy Mliangydy 1月前

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

    点赞 1 评论 复制链接分享