css中position:sticky的示例分析

小编给大家分享一下css中position:sticky的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

css position:sticky的尝试

前言

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

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

兼容性

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

学习使用

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

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

还有一种设计效果，比如叠加效果也能实现，还有很多效果，具体大家可以根据sticky特性自由发挥： 叠加效果： https://jsbin.com/fegiqoquki/edit?html,css,output

特性

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

1. 父级元素不能有任何overflow:visible以外的overflow设置，否则没有效果，因为改变了滚动容器（即使没有出现滚动条）。

2. 父级元素高度过小，根本不够stikcy块的滚动，就会没有效果。

以上是“css中position:sticky的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！