杀了个回马枪,还是说说position:sticky吧« 张鑫旭 | sticky css
这篇文章发布于2018年12月2日,星期日,18:04,归类于CSS相关。阅读115297次,今日52次98条评论[1][2]byzhangxinxu[3]fromhttps://www.zhangxinxu.com/wordpress/?p=8244[4]本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。一、Chrome杀了个回马枪position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:...
这篇文章发布于 2018年12月2日,星期日,18:04,归类于 CSS相关。 阅读 115297 次, 今日 52 次 98 条评论[1][2]
by zhangxinxu[3] from https://www.zhangxinxu.com/wordpress/?p=8244[4]本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、Chrome杀了个回马枪position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:sticky了,不要被人留下厚此薄彼的口舌。
Safari目前还需要-webkit-私有前缀。
二、position:sticky简介单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。例如,可以滚动下面这个框框感受下交互表现:
其中导航元素设置了如下CSS:
nav { position: -webkit-sticky; position: sticky; top: 0; }于是,正如大家看到,随着页面的滚动,当导航距离上边缘0距离的时候,黏在了上边缘,表现如同position:fixed。
//zxx: position:sticky要想生效,top属性或则left属性(看滚动方向)是必须要有明确的计算值的,否则fixed的表现不会出现。
这就是position:sticky最基本的表现,特别适合导航的跟随定位效果。
很多人以为position:...