如何设置跟随滚动条一起滚动的div

原理

使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。

实例源码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<style type="text/css">
			.mainBox{
				margin:0px 10px;
				width:400px;
				height:400px;
				position:relative;
				background:#FF0000;
			}
			.sourceBox{
				float:left;
				width:100px;
				height:100px;
				position:relative;
				background:#00FFFF;
			}
			.fixedBox{
				z-index:10;
				width:100px;
				height:100px;
				position:fixed;
				left:50px;
				top:50px;
				background:#00FF00;
			}
		</style>
	</head>

	<body>
		<div class="fixedBox">跟随窗口
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
	</body>
</html>


版权声明：本文为flygoa原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。