小编给大家分享一下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元素效果完全受制于父级元素们们们。如果你发现你设置了不起效果,可以检查以下两个原因:
父级元素不能有任何overflow:visible以外的overflow设置,否则没有效果,因为改变了滚动容器(即使没有出现滚动条)。
父级元素高度过小,根本不够stikcy块的滚动,就会没有效果。
以上是“css中position:sticky的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。