css position:sticky的尝试
前言
sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置时,才触发fixed的效果的:
我们经常的做法是用JavaScript去监听滚动事件然后进行处理,比如会用到类似stickyjs的一些插件 http://stickyjs.com/ ,从2017年左右开始css中的position:sticky就是为了这中设计而诞生的,今天我们来认识一下它。
兼容性
差不多两年时间了,兼容性还算可以的,对于那种面向技术人员,后台管理人员的项目,我倒是觉得可以用上,毕竟他们只是升级一下浏览器不仅能体验更好的效果,也能降低码农的工作量:
https://caniuse.com/#search=position%3A%20sticky
学习使用
我们来实现陶宝右侧的效果,就特别简单了,没什么好学的,直接设置就行了:
.sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
简单例子: https://jsbin.com/vivixezule/edit?html,css,output
还有一种设计效果,比如叠加效果也能实现,还有很多效果,具体大家可以根据sticky特性自由发挥: 叠加效果: https://jsbin.com/fegiqoquki/edit?html,css,output
特性
position:sticky
有个非常重要的特性,那就是sticky元素效果完全受制于父级元素们们们。如果你发现你设置了不起效果,可以检查以下两个原因:
- 父级元素不能有任何
overflow:visible
以外的overflow设置,否则没有效果,因为改变了滚动容器(即使没有出现滚动条)。 - 父级元素高度过小,根本不够stikcy块的滚动,就会没有效果。
唠叨
近几年Web开发语言都在互相协作着,这种协作是一种促进,有时候我们总调侃学不动了,一直在变化,可是哪知道这些变化反而解决了我们的痛点,也许你习惯了,觉得不是痛点不去学,但是不能否认你学会之后,你会说以前太痛了,再也不想回去了,就像学会vue,react, angular 等,再回去jquery真的觉得有点痛苦了,但你不想学之前,总觉得jQuery不怎么痛,你习惯了。
前后端的分离让 JS接替了部分后端语言的工作,比如数据绑定交互等;css接替了部分JS工作,比如动画和各种常见设计效果等,各种语言都在共同协作着,只是为了解决码农痛点,我们能做的就是抽空瞄一眼,试一试,学一学 ,利永远大于弊,学习的时间不仅可以为你大大的节省开发时间,更会让你拥有愉悦的编程体验
css position:sticky的尝试的更多相关文章
- css position sticky All In One
css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- CSS Position(定位)
CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...
- css position 5种不同的值的用法
position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
随机推荐
- 王晶:华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019
演讲嘉宾 | 王晶(华为云人工智能高级算法工程师王晶) 出品 | AI科技大本营(ID:rgznai100) 近期,由 CSDN 主办的 2019 中国AI 开发者大会(AI ProCon 2019) ...
- 如何把图片变得炫酷多彩,Python教你这样实现!
有趣的图片 如何能让图片变得好玩?首先需要让它动起来!可如果是多张图片,我们还可以将其拼接起来组成gif动图,可一张图怎么玩?记得之前写过一个小练习,把一张图片拆分成九宫格的分片图.那么,能否由此下手 ...
- 使用Spring Data JPA的Specification构建数据库查询
Spring Data JPA最为优秀的特性就是可以通过自定义方法名称生成查询来轻松创建查询SQL.Spring Data JPA提供了一个Repository编程模型,最简单的方式就是通过扩展Jpa ...
- 转:SQL SERVER 2014 安装图解(含 SQL SERVER 2014 安装程序共享)
开篇介绍 2015年1月1日,新的一年开始之际,本来应该好好做点有意义的事情来跨个年的.结果,老习惯 - 睡觉之前一定要折腾一下电脑,说干就干,给新到的 DELL 电脑装虚机,下载 SQL SERVE ...
- 关于TC297的Flash写入之前是否需要先擦除的问题
通过实际测试,对TC297 Flash的一个地址空间可以重复执行写入操作(program),而不需要先对该区域所在扇区进行擦除. MPC5675K则需要在写入之前进行擦除.
- springcloud集成redis
1.application.properties/application.yml配置: redis: # redis数据库索引(默认为0),我们使用索引为3的数据库,避免和其他数据库冲突 databa ...
- shell 循环读取文件及字符串转为数组
文件/etc/hdocker_config内容如下: 30.72.63.94 30.72.63.95 30.72.63.96 30.72.63.97 /tmp/lasclocker.tar maste ...
- Ceph 块存储
任何普通的linux主机都可以充当ceph客户机,客户机通过网络与ceph存储集群交互以存储或检索用户数据.Ceph RBD支持已经添加到linux主线内核中,从2.6.34以及以后版本开始. === ...
- ARTS-S EN0001-In tech race with China, US universities may lose a vital edge
原文 The U.S. is still out in front of global rivals when it comes to innovation, but American univers ...
- js(对象,入口函数,函数)
对象: 创建: var myObject = {};/* 声明对象字面变量*/ 添加值: myObject.name="Jener"; myObject.age=25; 代码格式: ...