position之sticky，让某些元素在滚动一定距离之后固定在某个位置

最新推荐文章于 2024-02-19 14:10:48 发布

小青龙8085

最新推荐文章于 2024-02-19 14:10:48 发布

阅读量2.5k

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104032574

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

position：sticky

作用：relative+fixed的结合，制造出吸附效果。

再向上滚动页面的时候，有时我们想让某些元素在滚动一定距离之后固定在某个位置，这个时候就可以用这种定位方式。

效果：

滚动前：

滚动后：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 100%;
				height: 50px;
				background: skyblue;
			}
			.box2{
				width: 100%;
				height: 50px;
				background: darkorange;
				position: sticky;
				top: 0;
			}
			.box3{
				width: 100%;
				height: 1000px;
			}
		</style>		
	</head>
	<body>
		<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 />
		</div>
	</body>
</html>

小青龙8085

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
position之sticky，让某些元素在滚动一定距离之后固定在某个位置

position：sticky作用：relative+fixed的结合，制造出吸附效果。再向上滚动页面的时候，有时我们想让某些元素在滚动一定距离之后固定在某个位置，这个时候就可以用这种定位方式。效果：滚动前：滚动后：代码：<!DOCTYPE html><html> <head> <meta charset="...
复制链接

扫一扫