position:sticky粘性定位实现吸顶效果

你是不是做顶部悬浮喜欢用js监听滚动轴移动位置，然后position:fixed定位悬浮（https://www.902d.com/5968.html），还会遇到固定元素一直“颤抖”个不停？哈哈，试试用一下 css position:sticky实现顶部悬浮——吸顶效果。例如：改版之后的站长之家的菜单.

用法：

和正常定位一样，位置和层级！

position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 6;

使用时注意：

遇到overflow:hidden，这个属性就挂了，也就是说，父级不能有溢出隐藏的这个属性！！！当然，overflow-y: auto情况下是可以用的。

属性兼容性：

目前测试的现代浏览器（IE除外的主流浏览器）均支持position:sticky，在can i use检测的效果如下：

也是仅仅不支持在table中的tr和thead，其他元素标签都是可以使用的。这不是很Nice！爽歪歪，再也不用js监听滚动轴事件了。假如实在需要兼容IE也是有办法的，这不有完美的轮子了，直接用：https://github.com/wilddeer/stickyfill