纯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
就算了。
结语
转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料
回复「电子书」领取27本精选电子书
回复「加群」加入前端大神交流群,一起学习进步
回复「面试」获取 面试 精选文章
分享和在看就是最大的支持❤️
纯CSS实现吸附效果相关推荐
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- 制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果 首先是构思 我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭 未选中,则 ...
- html实现开关,使用纯css实现开关效果
首先是构思 我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭 未选中,则关闭开关 选中,则打开开关 开始画出off.on状态的草图 ...
- 如何用纯 CSS 实现优惠券效果
背景 本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果 上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
- 纯CSS实现弹幕效果
纯CSS实现弹幕效果 动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- 纯css实现信封效果
纯css实现信封效果 <body><div id="dialog"><div id="envelope"><div i ...
- HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
最新文章
- Android(java)学习笔记96:layout_weight使用注意事项
- python 桑基图 地理坐标_【转载】Python数据可视化-实现Sankey桑基图
- 用友ERP供应链模块(一)----库存盘点
- 中国人工智能学会通讯——人工智能如何造福人类 1.1 人工智能是中性技术
- Python Django Session中存取值常用API
- linux 显示unix时间,小弟我使用过的Linux命令之uptime - 显示系统运行时间
- linux获取read值,read命令读取用户输入
- R可视化lend_club 全球最大的P2P平台数据75W条
- 【枚举】连续自然数和(jzoj 2102)
- Bash(Shell)基础知识
- android 循环引用,spring循环引用
- iOS-深拷贝和浅拷贝
- AOSP、AOKP、CM ROM 究竟有哪些区别
- 港科夜闻|香港科大(广州)熊辉教授获委任为协理副校长(知识转移)
- 黄芪和当归的分量是5:1的比例,如黄芪30克,当归6克
- int和Integer区别,为什么有了int还要有Integer
- truncate的用法
- python定义变量类型为数字_python 学习(四)- 变量类型
- 低代码的 Soulmate 燃爆 Ignite China 晚场趴,高光瞬间不止亿点点
- 2.4 设计评选优秀教师和学生的程序,其类结构如图 12.5 所示。当输入一系列教师 或学生的记录后,将优秀学生及教师的姓名列出来。 图 12.5 类结构 类 base char name[8]; 含
热门文章
- C++中对字符串的操作
- 动易数据库conn.asp的问题
- java.sql.SQLException: ORA-00911: 无效字符(编译器大坑)
- 1688/阿里巴巴按关键字搜索新品数据 API 使用说明
- 钱多多第二阶段冲刺07
- 京东商城暂停所有地铁自提点:或因租金成本高
- 程序员必知的编程4大祖师爷,C语言之父堪称编程界的牛顿!
- c语言书面作业,巢湖学院2011级网络工程1,2班C语言书面作业(江家宝)版
- 服务器安装虚拟机怎么分配内存,配置虚拟机的内存的方法
- 清华计算机系校服,北大清华(清华大学各系校服)