css固定元素,滚动到此处位置时固定position: sticky

css固定元素,滚动到此处位置时固定position: sticky

技术教程gslnedu2025-07-10 16:41:142A+A-

需求:当页面很长,有滚动条时,需要固定页面上的部分元素,便于下方元素和上方固定元素的对照。


.box1{
				width: 100%;
				height: 50px;
				background: skyblue;
			}
			.box2{
				width: 100%;
				height: 50px;
				background: darkorange;
				position: sticky;
				top: 0;
			}
			.box3{
				width: 100%;
				/*height: 1000px;*/
			}



<div class="box1">这是一行文字</div>
		<div class="box2">这是要固定的部分</div>
		<div class="box3">		
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
      ......
      </div>
点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8