小程序到达顶部自动贴合

实现效果： 某个view开始是正常的一个view，滚动到顶部以后 加一个position: fixed; 属性。

效果：（不会传动图，将就着看把，，哈哈哈哈）

页面上滚，NAV贴合到顶部，滚回来以后取消贴合。

 

 

wxml：

<view class='fixed-position'></view>
<view class="slider">
  <swiper class='slider-items' indicator-dots="{{true}}"
          indicator-color="white" interval="{{true}}">
    <block wx:for="{{[1,2,3]}}" wx:key="*this">
      <swiper-item>
        <view class='slider-item item-{{index}}'></view>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class='{{tabFixed ? "fixed-tab" : ""}}'>
  <view class='tab'>
    <tabbar tabItems="{{tabOptions}}">
    </tabbar>
  </view>
</view>
<view class='content'></view>

css

.fixed-position{
  width: 100%;
  height: 1px;
  position: fixed;
  visibility: hidden;
}
.slider{
  position: relative;
}
.slider-items{
  height: 260rpx;
}
.slider-item {
  width: 100%;
  height: 100%;
}
.item-0{
  background-color: lightblue;
}
.item-1{
  background-color: lightgreen;
}
.item-2{
  background-color: lightpink;
}
.tab{
  background-color: white;
}
.fixed-tab{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.content{
  height: 1500px;
  background-color: #eaeaea;
  width: 100%;
}

js

Page({
  data: {
    tabFixed: false,
    tabOptions: ['全部', '附近', '特别关注']
  },
  /**
   * 初始化观察器
   */
  initTabObserver() {
    this.tabObserver = wx.createIntersectionObserver(this)
    this.tabObserver
      // 相对于页面可视区
      .relativeToViewport()
      // 相对于某一个元素
      // .relativeTo('.fixed-position')
      .observe('.slider', (res) => {
        console.info(res)
        const visible = res.intersectionRatio > 0
        this.setData({ tabFixed: !visible })
      })
  },
  onLoad(){
    this.initTabObserver()
  },
  onUnload(){
    this.tabObserver.disconnect()
  }
})