Automatic fitting when the applet reaches the top

Realization effect ： Some view The beginning is a normal one view, After scrolling to the top Add one more position: fixed; attribute .

effect ：（ No transmission diagram , Make do with it ,, Ha ha ha ha ）

Page scroll up ,NAV Fit to the top , Roll back and cancel the fitting .

 

 

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: [' All ', ' near ', ' Pay special attention to ']
  },
  /**
   *  Initialize the observer 
   */
  initTabObserver() {
    this.tabObserver = wx.createIntersectionObserver(this)
    this.tabObserver
      //  Relative to page viewable area 
      .relativeToViewport()
      //  Relative to an element 
      // .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()
  }
})