欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css position:sticky的尝试

程序员文章站 2022-06-04 18:37:20
前言 sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置时,才触发fixed的效果的: 我们经常的做法是用JavaScript去监听滚动事件然后进行处理,比 ......

前言

sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置时,才触发fixed的效果的:

我们经常的做法是用javascript去监听滚动事件然后进行处理,比如会用到类似stickyjs的一些插件  ,从2017年左右开始css中的position:sticky就是为了这中设计而诞生的,今天我们来认识一下它。

兼容性

差不多两年时间了,兼容性还算可以的,对于那种面向技术人员,后台管理人员的项目,我倒是觉得可以用上,毕竟他们只是升级一下浏览器不仅能体验更好的效果,也能降低码农的工作量:

https://caniuse.com/#search=position%3a%20sticky

学习使用

我们来实现陶宝右侧的效果,就特别简单了,没什么好学的,直接设置就行了:

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

简单例子: 

还有一种设计效果,比如叠加效果也能实现,还有很多效果,具体大家可以根据sticky特性*发挥: 叠加效果: 

特性

position:sticky有个非常重要的特性,那就是sticky元素效果完全受制于父级元素们们们。如果你发现你设置了不起效果,可以检查以下两个原因:

  1. 父级元素不能有任何overflow:visible以外的overflow设置,否则没有效果,因为改变了滚动容器(即使没有出现滚动条)。
  2. 父级元素高度过小,根本不够stikcy块的滚动,就会没有效果。

唠叨

近几年web开发语言都在互相协作着,这种协作是一种促进,有时候我们总调侃学不动了,一直在变化,可是哪知道这些变化反而解决了我们的痛点,也许你习惯了,觉得不是痛点不去学,但是不能否认你学会之后,你会说以前太痛了,再也不想回去了,就像学会vue,react, angular 等,再回去jquery真的觉得有点痛苦了,但你不想学之前,总觉得jquery不怎么痛,你习惯了。

前后端的分离让 js接替了部分后端语言的工作,比如数据绑定交互等;css接替了部分js工作,比如动画和各种常见设计效果等,各种语言都在共同协作着,只是为了解决码农痛点,我们能做的就是抽空瞄一眼,试一试,学一学 ,利永远大于弊,学习的时间不仅可以为你大大的节省开发时间,更会让你拥有愉悦的编程体验