导航：首页 > 开发技术 >

css如何实现吸附布局

发表于：2024-11-24 作者：千家信息网编辑

千家信息网最后更新 2024年11月24日，小编给大家分享一下css如何实现吸附布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！吸附布局吸附布局指相对视窗任何滚动都

千家信息网最后更新 2024年11月24日css如何实现吸附布局

小编给大家分享一下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时将节点变成粘性定位。粘性定位是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。

            Top 1
        Top 2
        Normal
        Bottom 1
        Bottom 2

.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赋值有所不同就产生不同吸附效果。

细心的同学可能发现这些节点在某些滚动时刻处于相对定位，在特定滚动时刻处于固定定位。