[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)

前言：
position: sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：
#sticky-nav {
  position : sticky ;
  top : 100px ;
}
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

转载自: css粘性定位position：sticky

一开始应用于小程序发现粘性定位没有作用? 其实不然, 是因为小程序的状态栏和导航栏的高度, 导致看不出粘性定位的效果, 设置top为200px再滚动你就会发现滚动成功了.为什么会这样?

原因就是因为使用了自定义头部!!!

不太明白我说什么? 看图:

然后滚动发现:

被状态栏和导航栏遮住达不到需求, 所以top = 状态栏高度 + 导航栏高度

以上出现塌陷的原因就是因为使用了自定义头部!!!

以上出现塌陷的原因就是因为使用了自定义头部!!!

以上出现塌陷的原因就是因为使用了自定义头部!!!

解决办法:

// JS -----------------
// 获取手机状态栏高度 状态栏 + 导航栏高度
getTopHeight() {
   const { statusBarHeight } = wx.getSystemInfoSync(); //拿到的状态栏高度单位是px
   this.topHeight = statusBarHeight + 44; // 44是因为我的导航栏是自定义的, 且高度为44px
},



// HTML
<view :style="{ top: topHeight + 'px' }"></view>

---

拓展: 

如果在使用粘性定位的时候, 且页面在ios下出现了左右拖动的Bug.

那么上网搜索找到的解决办法基本是:

.cur_page {
  width:100%;
  overflow-x:hidden;
}

overflow-x: hidden;解决了左右拖动的Bug, 但是会导致粘性定位失效(文章开头有介绍到overflow: hidden会使sticky失效), 

所以最好的解决办法是给会导致左右拖动的区域添加:

<scroll-view scroll-y="true">
  <!-- ios会产生拖动的区域 -->
</scroll-view>

网上还有一种方法是(未尝试过, 尝试过的小伙伴可以留言哈):

在页面的.json中添加一条配置即可解决这个问题.
"disableScroll" :true

来自: 小程序列表左滑效果在IOS呈上下滑动影响样式