专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-07-19 12:59:11 基础教程 19 ℃

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


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

.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>

Tags:

最近发表
标签列表