jadeCat
jadeCat
  • 发布:2021-08-18 14:07
  • 更新:2021-08-18 14:07
  • 阅读:560

H5 css postion定位问题

分类:uni-app

移动端:不推荐使用sticky定位

Android手机微信浏览器页面滑动时会抖动

可能是浏览器兼容性问题

网上说的各种方案都不用试,亲测无效,都是水。

推荐使用fixed定位

自动吸顶

可试试如下方案:
直接使用滚动监听进行动态赋值

<template>  
    <view>  
        ...  
        ...  
    <view class="container" :style="{postion: postion}">  
       </view>  
    </view>  
</template>
data(){  
  return{  
     postion: static,  
  }  
},  
methods:{  
  onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替  
      console.log("滚动距离为:" + e.scrollTop); //判断滚动距离赋值替换postion属性  
     if(e.scrollTop >= 200){  
        this.postion = 'fixed'  
     }else{  
        this.postion = 'static'  
  },  
}
...  
...  
.container{  
        width: 200rpx;  
        box-sizing: border-box;  
        top: 44px;  
        z-index: 1;  
    }
0 关注 分享

要回复文章请先登录注册