小程序 position: sticky 吸顶效果真机兼容解决

于 2021-05-09 19:06:20 发布 857 收藏 2
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47940660/article/details/116568591
版权

小程序 解决真机吸顶问题position: sticky

在开发小程序时，遇到了一个问题，就是开发工具模拟器上 position: sticky 有效，安卓真机上有效，但是到了苹果上会有失效的状况，解决的办法是使用小程序的扩展组件（应该是微信也意识到了这个问题的存在）sticky 扩展组件

weixin_47940660
关注
  • 0
    点赞
  • 踩
  • 2
    收藏 更改收藏夹
  • 打赏
    打赏
  • 1
    评论
专栏目录
微信小程序----position:sticky
12-20
微信小程序----position:sticky:通过position:fixed与position:relative切换。
用position:sticky完美解决小程序吸顶问题
qq_43288013的博客
01-10 5517
最近一个项目甲方一定要两个tab菜单吸顶， 在网上找了好久没找到满意的，然后在一个博客中发现可以用position:sticky解决，因为之前没见过这个属性，然后搜了下，了解了用法，写了个小demo，发现挺好用的，完美解决不卡顿。 html： <template> <view class=""> <view class=""> <view ...
小程序的 position: sticky； 吸顶效果的使用方法
最爱喝怡宝的博客
03-30 2202
今天在使用 uniapp 编写小程序时需要使用到吸顶效果，设置如下： .head { position: sticky; top: 88rpx; z-index: 100; } 在网页上的显示效果是刚好固定在顶部显示，但是在微信开发者工具上，就距离顶部有了间隙 后面发现在小程序中，需要设置： top: 0; .head { position: sticky; top: 0; z-index: 100; } 注意事项： （1）距离顶部的吸顶距离 top:0 时才会生效； （2
微信小程序IOS & sticky 兼容写法
箴水的博客
10-19 991
项目场景： 1、自定义导航头信息； 2、sticky在组件内配置在安卓有效、IOS无效的情况； 问题描述： IOS监听机制问题导致sticky在组件内的机制失效 //导航栏吸顶效果 .bar-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 101; } 原因分析： 1、sticky定义在组件内，占位元素在页面里，安卓及模拟器有效，IOS真机无效 解决方案： 1、配置-web
微信小程序吸顶两种方式，一种js,一种css (position: sticky； top: 0；)
hangGe0111的博客
08-10 1261
1.比较常用的方式，通过js获取当前元素距离顶部的高度，同时通过onPageScroll监听页面滚动的高度，对比二者的大小，通过fixed定位来实现置顶悬浮。（此方式需注意，不要一直setdata，不然会出现卡顿现象）。 1. wxml <view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view> <view style="width: 1
关于position: sticky在小程序中IOS真机下，偶然失效的问题总结
厦门在乎科技
08-31 1417
虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。 最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论： IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效 直接在页面中写sticky有效
JS解决position:sticky的兼容性问题的方法
11-30
在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。 position:sticky的兼容性以及作用 Caniuse上显示sticky的兼容性如下： Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。 sticky组件实现 template部分 <div clas
position:sticky实现吸顶效果以及兼容性
qazxbjp2010的博客
03-26 3187
在开发时遇到一个吸顶效果的需求，先看一下最终实现的效果： 收到这个需求的时候，其实也知道position:stricky这个属性，现在重新介绍一下： 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父...
css的position:sticky吸顶功能的兼容性
最新发布
weixin_43966281的博客
06-10 626
吸顶功能的兼容性
吸顶处理兼容iOS和Android
Prince_fmx的博客
06-17 939
touch页面吸顶设置问题抛出解决思路sticky 定位解决办法判断设备类型安卓的吸顶处理iOS的吸顶处理代码整合 问题抛出 当页面上滑时，顶部当导航需要进行吸顶处理。滑动过程使用scroll事件监听，当滚动的高度到底一定时，便设置样式 absolute:fixed；top:0px;以吸顶处理。 以上处理在安卓中时完全没有问题的，但是在iOS中缺会出现严重的样式问题：页面滚动过程中并不吸顶。 解决...
position: sticky兼容iPhone6s，iPhone7
qq_41910413的博客
12-28 624
position: sticky;粘性定位 在开发小程序的时候，经常会遇到需要实现吸顶的效果，势必会用到position: sticky;粘性定位；但是也会遇到一些问题；即在安卓手机和苹果手机上显示正常，但是在iPhone6s，iPhone7上会出现了吸不住顶的问题，使用如下代码即可解决； 使用： position: sticky; position: -webkit-sticky; 代替： position: sticky; ...
微信小程序实现粘性布局sticky——注意事项
暗影刀客的博客
04-20 1万+
最近小程序要实现一个商城页面的切换菜单，处在页面的中间，滚动到最上面时，能够悬浮在顶部，最开始的解决方案是，外层使用scroll-view，监听滚动事件，当滚动到顶部时，菜单fixes布局，这样可以实现，但是一直监听的消耗内存和资源是问题，同时还会不流畅，出现卡顿，正好发现这个神器 position:sticky; 但是网上一搜，我大中国现状出来了，基本都是一个知识源，大家都是抄过来抄过去，但是...
[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)
前端一线搬运工的博客
07-13 4628
前言： position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,.
css粘性定位position：sticky问题采坑
热门推荐
小熊的博客
07-14 13万+
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...
position:sticky
weixin_30349597的博客
05-10 319
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav {positio...
微信小程序中的position问题
WickedDogg的博客
04-21 1万+
如果同时将一个position不为static的容器内的多个块position设置为absolute，开发者工具和安卓端会正常表现，即从容器左上角开始算起，依据设置的top，right，bottom，left来定位，像下面这样而在测试ios时候，表现有所差异，如果只设置某一边，比如说我设置了蓝块的top=0，黄块的bottom，那么我们期待的应该是这样表现但实际上在ios上测试的时候出现了这样的情况
使用 position:sticky 实现粘性布局
weixin_34143774的博客
02-15 1132
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ p...
小程序吸顶粘贴tab栏的最简单方法position：sticky；
qq_42148925的博客
09-25 1266
做吸顶请不要使用js用css最简单 之前一直使用js写吸顶发现并不好为什么因为onScrolltop在手机上计算会延迟导致了你已经画到了自己想要的地方却隔了两秒才监听到了你的额位置， position:sticky是css定位新增属性；专门用来做吸顶最合适，它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100...
position: sticky;实现悬停头部的效果。。。。
zhuhaomingoo的博客
07-10 956
css h5实现滚动到一定位置的头部悬停效果，position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0;保证子为父的第一个元素。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_47940660

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值