导航：首页 > 开发技术 >

CSS怎么实现吸附效果

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

千家信息网最后更新 2024年11月22日，这篇文章主要讲解了"CSS怎么实现吸附效果"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"CSS怎么实现吸附效果"吧！原理在 jQuery 时代就有很多

千家信息网最后更新 2024年11月22日CSS怎么实现吸附效果

这篇文章主要讲解了"CSS怎么实现吸附效果"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"CSS怎么实现吸附效果"吧！

原理

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

javascript 实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍 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

.ads-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。上述Demo里5个节点都声明了position:sticky，但由于top/bottom赋值有所不同就产生了不同的吸附效果。

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