关于css中position: sticky属性的基本使用

在日常开发中有时会遇到一些需要把类似搜索框和一些轮播图等内容固定在顶部的需求,而且要在你滚动你的鼠标滚轮或者移动内容的时候直接固定在顶部不动,这种情况下我们会有一个基本的布局思路,正常布局应该是如下所示的:
这个是基本的一个布局情况
css部分

 		* {padding: 0;margin: 0;}.box {width: 100%;height: 100%;}.h100,.h200,.h300,.h400,.h500 {width: 100%;height: 300px;line-height: 300px;text-align: center;background-color: greenyellow;}.h200 {background-color: aqua;}.h300 {background-color: yellow;}.h400 {background-color: orange;}.h500 {background-color: red;}.fixed-box {width: 300px;height: 300px;line-height: 300px;background-color: rgb(247, 38, 201);text-align: center;}

html部分

 	<div class="box"><div class="fixed-box">我是固定的显示区域</div><div class="h100">这里是h100区域</div><div class="h200">这里是h200区域</div><div class="h300">这里是h300区域</div><div class="h400">这里是h400区域</div><div class="h500">这里是h500区域</div></div>

接下来的思路应该就是如何把图中粉色的那部分给固定起来,并且不会影响到布局,常规的操作应该都是通过position: fixed来实现该功能,在.fixed-box中增加一行position: fixed得到下图:
在这里插入图片描述
好像并没有什么问题,此时确实是实现了我们最初的想法,但是由于我没有在粉色盒子前加个盒子包裹住它,因此margin:0 auto的属性就失效了,它会自动从左到右排版,这种情况就可以使用别的居中属性来实现居中排布了,下面我使用transform这个属性来进行居中操作,这个属性具体就不进行描述了,有兴趣的朋友们可以自己去了解一下.我们在.fixed-box中增加这几行代码即可实现居中效果

		.fixed-box {width: 300px;height: 300px;margin: 0 auto;line-height: 300px;background-color: rgb(247, 38, 201);text-align: center;position: fixed;left: 50%;top: 0;transform: translateX(-50%);}

效果如下:
在这里插入图片描述
不管你滚动到什么地方,这个粉色盒子都会固定在顶部,基本的功能就已经完成了

但是这个position: fixed属性是有局限性的,如果我们的需求改动一下,我们需要不遮挡住h100部分,也就是不能遮挡住绿色部分的内容,这个时候我们又该怎么去实现呢?如果是会js的朋友们肯定就马上可以想到可以通过监听滚动条的滚动区域来进行控制这个粉色盒子的显示和隐藏,也就是没有滚动的情况下是应该如下方的样式:

		.fixed-box {width: 300px;height: 300px;line-height: 300px;background-color: rgb(247, 38, 201);text-align: center;}

它自动在绿色区域上面,当监听到滚动条超过了h100区域后再通过js增加一个类:

		.fixed-now {position: fixed;left: 50%;top: 0;transform: translateX(-50%);}

这样就实现了需求.但是如果你是没有学过js,或者说不熟悉js的人,又要实现这种效果,你应该怎么办?
这个时候position: sticky就可以完美的实现你的需求.
你可以把.fixed-box的代码改成如下:

		.fixed-box {width: 300px;height: 300px;margin: 0 auto;line-height: 300px;background-color: rgb(247, 38, 201);text-align: center;position: sticky;top: 0;}