css如何实现吸附布局(css,开发技术)

吸附布局

吸附布局指相对视窗任何滚动都能占据特定位置的占位布局。视窗滚动到特定位置，布局固定在该位置，后续不随视窗滚动而滚动。该布局产生的效果俗称吸附效果，是一种常见网页效果。譬如吸顶效果和吸底效果都是该范畴，经常在跟随导航、移动广告和悬浮提示等应用场景里出现。

在jQuery时代就有很多吸附效果插件，现在三大前端框架也有自身第三方的吸附效果组件。它们都有着共通的实现原理：监听scroll事件，判断scrollTop和目标节点的位置范围，符合条件则将目标节点的position声明为fixed使目标节点相对于视窗定位，让用户看上去就像钉在视窗指定位置上。

JS实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍CSS，在此就不贴相关的JS代码了。在此推荐一个很少见很少用的CSS属性position:sticky。简单的两行核心CSS代码就能完成十多行核心JS代码的功能，何乐而不为呢。

简单回顾position属性值，怎样用就不说了，大家应该都熟悉。

当值为sticky时将节点变成粘性定位。粘性定位是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。

<divclass="adsorption-position"><ul><li>Top1</li><li>Top2</li><li>Normal</li><li>Bottom1</li><li>Bottom2</li></ul></div>

.adsorption-position{overflow:auto;position:relative;width:400px;height:280px;outline:1pxsolid#3c9;ul{padding:200px0;}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就算了。期待该属性有更好的发展，毕竟吸附布局真的是一种常见布局。