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

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

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

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

用法:

和正常定位一样,位置和层级!

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

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

使用时注意:

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

属性兼容性:

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

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

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

 

 

免责声明:玩转网作为开放的信息发布平台,所有资讯仅代表作者个人观点,与玩转网无关。如文章出现侵权、违规及其他不当言论,请联系微信:pi1881

风险提示:本站所提供的资讯不代表任何投资暗示。投资有风险,入市须谨慎。

山高不厌攀,水深不厌潜,学精不厌苦,只有努力才能赢得最后的成功!

© 版权声明
THE END
感觉文章不错,分享给身边的朋友吧!
点赞5赞赏
分享