微信小程序吸顶效果简单方法实现

position：sticky 粘性定位

是结合了position:relative和position:fixed两个功能为一体的组合定位，不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。

使用该属性有几个必要条件：

1、父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。

2、父级元素也不能设置固定的height高度值，否则也没有粘滞效果。

3、同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

4、sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。

微信小程序中有些官方组件是不支持此条属性的，例如公众号关注组件，这时我们可以在official-account 外面套一层view，就可以实现吸顶效果。

  <view class="follow"><official-account ></official-account></view>

.follow{
  position: sticky;
  top: 0;
  z-index: 999;
}