纯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="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:sticky
和top/bottom:npx
。上述Demo里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
就算了。
兼容性
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- R中的stack和unstack函数
- 第33期:上海自来水来自海上,回文字符串验证!
- nginx location配置
- 快速学习-RocketMQ Dledger快速搭建
- 原创 | 非典型算法题,用程序和电脑玩一个游戏
- 快速学习-RocketMQ Dledger集群搭建
- 原创 | 你能想出解法,让你的基友少氪金吗?
- 快速学习-ElasticJob运维平台
- 第34期:最后一个单词的长度(高频)
- 原创 | 学会这三个命令,你就不再是git只会用三板斧的菜鸟了
- 构建Flink第一个应用程序
- 第35期:从 DFS 学习二叉树!(适合小白)
- ROS自平衡车案例学习(机器人操作系统+现代控制理论融合)
- Git 不能提交空目录?我也是醉了!
- 相关矩阵、特征、预测、股市!(附代码)