吸顶悬停,是在小程序开发中常见的需求。
过去常见的实现方法就是通过js监听滚动事件然后改变需要吸顶悬停元素的css来实现。
其大致思路如下:
1. 计算需要吸顶元素到顶部的距离
2. 通过js监听滚动事件,达到距离后,改变需要吸顶元素的样式,典型的如:position: fixed。元素脱离了文档流,为避免其他元素改变位置,还需要设置一占位元素。
实现原理,并不复杂,但是需要注意的细节却不少。另外,因为需要监听滚动事件,效率也是比较低的。
现在在小程序中有了一种更加简单高效的实现方式,就是:position sticky。
position sticky只在一些比较新的浏览器上才支持,不过实验了一下,发现现在各个小程序平台都是支持的!
那么现在使用uniapp开发小程序的时候,需要一个元素吸顶悬停,只需要为这个元素添加以下样式:
position: -webkit-sticky;
position: sticky;
top: var(--window-top);
-
追格小程序V1.9.0发布用户注销功能与积分阅读帖子(模块)追格小程序是一个积木式小程序搭建框架,基于uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
api scope is not declared in the privacy agreement程序功能突然失效了……
-
微信小程序蜘蛛是什么微信小程序蜘蛛是什么
-
微信小程序页面无法分享微信小程序页面无法分享
-
追格小程序图文发帖和个人资料无法上传图片的解决办法追格小程序:图文发帖、个人资料无法上传图片的解决办法
-
使用追格小程序创建活动报名小程序使用追格小程序创建活动报名小程序
暂无评论,抢个沙发...