1、什么是吊顶？天花板效应是Web开发中常见的交互方式。常见的应用场景包括导航、搜索框等。可横向分流，吸睛的吸顶效果和横滑切标签的手势可以让用户快速发现更多产品。市场现有H5导航栏吸顶效果演示1、淘宝聚划算吸顶演示：2、淘宝百亿补贴吸顶演示：2、常见的tabbar吸顶方案是基于position粘性定位。天花板方案是基于JS监控滚动的天花板方案3.原理及方案比较1.持仓粘性方案实现及详解1.1．知识详解Position使我们能够使用我们经常使用的CSS属性，可以为布局带来很好的解决方案，解决一些特定的问题，比如卡片的各种图标。Position粘性定位也是实现吸顶的方案之一。先来看看position的属性值和相关含义：MDN传送门关于sticky属性，顾名思义，sticky这个词的中文意思是“粘性”，它的作用是position：relative和位置：固定。当元素在屏幕中时，它表现为相对的，而当它即将滚出显示屏幕时，它表现为固定的。这个属性一度被chrome废弃，后来支持了nav{position:-webkit-sticky;position:sticky;top:1.2Compatibility如上图，position的sticky已经被各种浏览器所支持，并且已经得到了比较好的支持，只不过safari还需要-webkit-前缀的支持。演示实现：*{padding:0;margin:0;}.container{width:100%;background:rgba(0,0,0,.5);}.nav{width:100%;height:50px;text-align:center;line-height:50px;background:black;color:white;position:sticky;top:0;}.body{width:100%;height:10000px;}
