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 属性则决定了该元素的最终位置. 然后来看看 ...
随机推荐
- ZZ:SDNLAB技术分享(一):ODL的SFC入门和Demo
在网络通信过程中,包含各式各样的网络服务功能.既可以包含传统的像防火墙,NAT等功能,也有包含特定的网络应用功能(Service Function).将特定的网络应用功能有序地组合起来,接着让流量通过 ...
- Spring MVC中的Controller是Serlvet吗?
1. Controller不是Servlet DispatcherServler是Spring MVC中的唯一Servlet,(这点可通过查看FrameworkServlet的子类确认) Servle ...
- 洛谷 题解 CF1151D 【Stas and the Queue at the Buffet】
本蒟蒻又双叒叕被爆踩辣!!! 题目链接 这道题我个人觉得没有紫题的水平. 步入正题 先看题: 共有n个人,每个人2个属性,a,b; 窝们要求的是总的不满意度最小,最满意度的公式是什么? \(ai * ...
- 消息通知机制(NSNotification和NSNotificationCenter)
作者:FlyElephant 出处:http://www.cnblogs.com/xiaofeixiang iOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多, ...
- 数据库Oracle通用函数
通用函数:可用于任意数据类型,并且适用于空值.• NVL (expr1, expr2) • NVL2 (expr1, expr2, expr3) • NULLIF (expr1, expr2) • C ...
- 用Python写一个游戏脚本,你会吗?
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:ivat4u 学习python有一段时间了,由于python语言的强大 ...
- 上手spring boot项目(三)之spring boot整合mybatis进行增删改查
使用mybatis框架进行增删改查大致有两种基础方式,一种扩展方式.两种基础方式分别是使用xml映射文件和使用方法注解.扩展方式是使用mybatis-plus的方式,其用法类似于spring-data ...
- VS编译命令
一.前言 由于公司要求项目需要走CI构建平台,抛弃掉之前的人工编译打包方式,所以需要调研一下项目怎么通过命令行编译出产物. 二.准备工作 在构建机器上安装vs(本文示例为vs2017) 将代码上传版本 ...
- JVM垃圾收集器CMS和G1
CMS(Concurrent Mark Sweep)收集器是一种以获取 最短回收停顿时间 为目标的收集器.采用的是"标记-清除算法",整个过程分为4步 由于整个过程中,并发标记和并 ...
- nginx 自启动设置
首先,在linux系统的/etc/init.d/目录下创建nginx文件,使用如下命令: 1 vim /etc/init.d/nginx 在脚本中添加如下命令: #!/bin/sh # # nginx ...