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 属性则决定了该元素的最终位置. 然后来看看 ...
随机推荐
- 从“职场小白”进阶为“行业大牛”,四个"锦囊"教你破局
在早期软件行业,会存在一个普遍的现象,有些大学的本科,或者研究生毕业,他们去面试工作的时候会发现,面试下来代码能力可能不是太好,这种情况下公司会问你愿不愿意去做测试? 如果说早期软件测试行业还是一个风 ...
- 洛谷 题解 P5595 【【XR-4】歌唱比赛】
本蒟蒻又双叒叕被爆踩了. 考试时一遍过 其实这题还是很简单的,难度不会大于普及组T1. CSP 2019 RP++ 看开始看到题目,觉得特别长,不想看... 我来和你们分析分析题目,你们就都可以秒了. ...
- syslog日志
Syslog协议 系统日志(Syslog)协议是在一个IP网络中转发系统日志信息的标准,它是在美国加州大学伯克利软件分布研究中心(BSD)的TCP/IP系统实施中开发的,目前已成为工业标准协议,可用它 ...
- 用Cocoapods并结合Github管理,导入,更新,下载自己的SDK
转自:http://www.jianshu.com/p/129d3c315ea6
- go学习第三天、数据类型
基本数据类型 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint64 uintptr byte // alias ...
- Spring Boot Validation,既有注解不满足,我是怎么暴力扩展validation注解的
前言 昨天,我开发的代码,又收获了一个bug,说是界面上列表查询时,正常情况下,可以根据某个关键字keyword模糊查询,后台会去数据库 %keyword%查询(非互联网项目,没有使用es,只能这样了 ...
- [Python Basics]引用系统(The Import System)
欲上高楼去避愁,愁还随我上高楼.经行几处江山改,多少亲朋尽白头. 归休去,去归休.不成人总要封侯?浮云出处元无定,得似浮云也自由. 我从短暂的Python工作当中学到一件事,越是模块化,就越会发现py ...
- spring源码学习之设计模式(1)单例模式
众所周知,单例模式分为饿汉式和懒汉式,昨天在看了<spring5核心原理与30个类手写实战>之后才知道饿汉式有很多种写法,分别适用于不同场景,避免反射,线程不安全问题.下面就各种场景.采用 ...
- vue2.5 + element UI el-table 导出Excel
安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...
- Python3 常用模块2
目录 time 模块 时间戳形式 格式化时间 结构化时间 time.time() time.sleep() datetime 模块 random 模块 hashlib 模块 和 hmac 模块 typ ...