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元素效果彻底受制于父级元素们们们。若是你发现你设置了不得效果，能够检查如下两个缘由：

1. 父级元素不能有任何overflow:visible之外的overflow设置，不然没有效果，由于改变了滚动容器（即便没有出现滚动条）。
2. 父级元素高度太小，根本不够stikcy块的滚动，就会没有效果。

唠叨

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

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