css粘性定位position:sticky

最新推荐文章于 2024-07-21 20:01:56 发布

web前端小龚

最新推荐文章于 2024-07-21 20:01:56 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： css css3 html 定位 html5

本文链接：https://blog.csdn.net/qq_41560520/article/details/114268309

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

欢迎点击: 个人官网博客

介绍：position:sticky可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

sticky运用案例:vivo X60 pro 官网，以及一些商城的头部导航栏固定

缺点：对IE不是很友好，兼容一般般

简单demo:
在这里插入图片描述
demo代码

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