您现在的位置是:网站首页> 编程资料编程资料

用position:sticky完美解决小程序吸顶问题的实现方法position:sticky 粘性定位的几种巧妙应用详解CSS使用position:sticky 实现粘性布局的方法position:sticky用法介绍及浏览器兼容性

2021-09-02 1014人已围观

简介 这篇文章主要介绍了用position:sticky完美解决小程序吸顶问题的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近一个项目甲方一定要两个tab菜单吸顶, 在网上找了好久没找到满意的,然后在一个博客中发现可以用position:sticky解决,因为之前没见过这个属性,然后搜了下,了解了用法,写了个小demo,发现挺好用的,完美解决不卡顿。

在这里插入图片描述

在这里插入图片描述

html:

css:

主要是
position: -webkit-sticky; position: sticky;
还要加个top值,离顶部多少距离吸顶

感兴趣的同学可以去
mdn–深入了解

到此这篇关于用position:sticky完美解决小程序吸顶问题的实现方法的文章就介绍到这了,更多相关position:sticky小程序吸顶内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关内容

-六神源码网