首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >纯CSS实现吸附效果

纯CSS实现吸附效果

作者头像
JowayYoung
发布2020-08-25 09:45:34
3.7K0
发布2020-08-25 09:45:34
举报
文章被收录于专栏:JowayYoung谈前端JowayYoung谈前端

前言

「吸附效果」就是网页滚到到某个位置,元素固定在该位置,后续不随网页滚动而滚动。吸附效果很常见,譬如吸顶效果吸底效果,经常用在跟随导航移动广告悬浮提示等场景中。

原理

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="ads-position">
    <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
    </ul>
</div>
.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:stickytop/bottom:npx。上述Demo里5个节点都声明了position:sticky,但由于top/bottom赋值有所不同就产生了不同的吸附效果。

在线预览

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

  • 第1个<li>top0px,滚动到容器顶部就固定
  • 第2个<li>top40px,滚动到距离容器顶部40px就固定
  • 第3个<li>:没有声明top/bottom,就一直保持相对定位
  • 第4个<li>bottom40px,滚动到距离容器底部40px就固定
  • 第5个<li>bottom0px,滚动到容器底部就固定

当然,换成leftright也一样能实现横向的吸附效果

可点击「阅读原文」查看本文的源码与效果。

注意

粘性定位的参照物并不一定是position:fixed

目标元素的任意祖先元素都未声明position:relative|absolute|fixed|sticky,才与position:fixed表现一致。

当离目标元素最近的祖先元素声明了position:relative|absolute|fixed|sticky目标元素就相对该祖先元素进行粘性定位

确认参照物跟position:absolute一致。

兼容

兼容性勉强还行,近2年发版的浏览器都能支持,SafariFirefox的兼容性还是挺赞的。有吸附效果需求的同学建议一试,要兼容IExplorer就算了。

兼容性

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IQ前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 原理
  • 实现
  • 注意
  • 兼容
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档