小编给大家分享一下css如何实现吸附布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
吸附布局指相对视窗任何滚动都能占据特定位置的占位布局。视窗滚动到特定位置，布局固定在该位置，后续不随视窗滚动而滚动。该布局产生的效果俗称吸附效果，是一种常见网页效果。譬如吸顶效果和吸底效果都是该范畴，经常在跟随导航、移动广告和悬浮提示等应用场景里出现。
在jQuery时代就有很多吸附效果插件，现在三大前端框架也有自身第三方的吸附效果组件。它们都有着共通的实现原理：监听scroll事件，判断scrollTop和目标节点的位置范围，符合条件则将目标节点的position声明为fixed使目标节点相对于视窗定位，让用户看上去就像钉在视窗指定位置上。
JS实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍CSS，在此就不贴相关的JS代码了。在此推荐一个很少见很少用的CSS属性position:sticky。简单的两行核心CSS代码就能完成十多行核心JS代码的功能，何乐而不为呢。
简单回顾position属性值，怎样用就不说了，大家应该都熟悉。
| 取值 | 功能 | 版本 |
|---|---|---|
| inherit | 继承 | 2 |
| static | 标准流 | 2 |
| relative | 相对定位 | 2 |
| absolute | 绝对定位 | 2 |
| fixed | 固定定位 | 2 |
| sticky | 粘性定位 | 3 |
当值为sticky时将节点变成粘性定位。粘性定位是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。
<div class="adsorption-position"> <ul> <li>Top 1</li> <li>Top 2</li> <li>Normal</li> <li>Bottom 1</li> <li>Bottom 2</li> </ul> </div>
.adsorption-position {
overflow: auto;
position: relative;
width: 400px;
height: 280px;
outline: 1px solid #3c9;
ul {
padding: 200px 0;
}
li {
position: sticky;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
&:nth-child(1) {
top: 0;
z-index: 9;
background-color: #f66;
}
&:nth-child(2) {
top: 40px;
z-index: 9;
background-color: #66f;
}
&:nth-child(3) {
background-color: #f90;
}
&:nth-child(4) {
bottom: 0;
z-index: 9;
background-color: #09f;
}
&:nth-child(5) {
bottom: 40px;
z-index: 9;
background-color: #3c9;
}
}
}两行核心CSS代码分别是position:sticky和top/bottom:npx。上述5个节点都声明position:sticky，但由于top/bottom赋值有所不同就产生不同吸附效果。
细心的同学可能发现这些节点在某些滚动时刻处于相对定位，在特定滚动时刻处于固定定位。
第1个<li>：top为0px，滚动到容器顶部就固定
第2个<li>：top为40px，滚动到距离容器顶部40px就固定
第3个<li>：未声明top/bottom，就一直保持相对定位
第4个<li>：bottom为40px，滚动到距离容器底部40px就固定
第5个<li>：bottom为0px，滚动到容器底部就固定
当然，换成left或right也一样能实现横向的吸附效果。
值得注意，粘性定位的参照物并不一定是position:fixed。当目标节点的任意祖先节点都未声明position:relative|absolute|fixed|sticky，才与position:fixed表现一致。当离目标节点最近的祖先节点声明position:relative|absolute|fixed|sticky，目标节点就相对该祖先节点产生粘性定位。简单来说确认参照物的方式与position:absolute一致。
兼容性勉强还行，近2年发版的浏览器都能支持，Safari和Firefox的兼容性还是挺赞的。有吸附效果需求的同学建议一试，要兼容IExplorer就算了。期待该属性有更好的发展，毕竟吸附布局真的是一种常见布局。
以上是“css如何实现吸附布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
