直接看效果！！！！！

实现思路：使用Swiper组件，wx.createSelectorQuery();onPageScroll（）{} api实现，就是用wx.createSelectorQuery();获取有悬停的区域距离顶部的距离(单位px);再根据onPageScroll监听页面滚动，达到条件就设样式为fixed;反之设为static;

核心:swper的高度要动态获取，要等于tak它子项swiper-item的高度(为内容总高度)；用wx.createSelectorQuery();动态获取，当点击切换和左右滑动切换的时候调用当前wx.createSelectorQuery();swiper-item的子项总高度后赋值给swiper即可

代码：

html:
<view class="container">
<view class="heard">我是头部</view>
  <view class="tab_wrap">
   <view class="tab_wrap_fixed {{fixed==true? 'fixed':'no_fixed'}}">
    <view class="tab_item {{currentIndex==index? 'active':''}}" wx:for="{{list}}" wx:key="index" bindtap="tap" data-index="{{index}}">{{item.name}}</view>
    </view>
  </view>
  <view class="cont_wrap">
    <swiper class="swiper" bindchange="swiperchnage" current="{{currentIndex}}" style="height:{{item_cont}}px">
      <swiper-item class="swiper_item" wx:for="{{list}}" wx:key="index">
       <view class="item_cont">
        <image class="banner_pic" src="{{item.img}}"></image>
        <view class="text">{{item.detail}}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</view>
 
css:
page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
}
.tab_wrap{
 width: 100%;
  height: 80rpx;
}
.fixed{
   transition: all 0.4s;
  position: fixed;
  left: 0;top: 0;
  z-index: 99;
 box-shadow:  0px 7px 7px -7px #5E5E5E;
}
.no_fixed{position: static}
.tab_wrap_fixed{
 
  background: #fff;
  width: 100%; 
  display: flex;
  font-size: 24rpx;
  height: 80rpx;
  box-sizing: border-box;
  color: #333;
  justify-content: center;align-items: center;
  border-bottom: 1px solid#dbdbdb;
  }
.heard{height: 200rpx;width: 100%;background: green;display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: #333;}
.tab_item{
  height: 50rpx;
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbdbdb;
  margin:0 15rpx;
  transition: 0.3s;
}
.cont_wrap{
  margin-top: 50rpx;
  width: 100%;
  height: 100%;
  display: flex;
}
.swiper{
  width: 100%;
 
 
}
.banner_pic{
  width: 650rpx;
  margin-left: 50rpx;
  height: 400rpx;
}
 
.scroll_view{
  width: 100%;
  height: 100%;
}
.text{
  padding: 0 50rpx;
  line-height: 200rpx;
  letter-spacing: 40rpx;
}
 
.scroll{
  height: 100%;
  width: 100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.active{
  color:#fff;
  background: #999;
}
 
js:
Page({
  data: {
    currentIndex:0,
    scrollShow:'',
   list:[
     {
       id:'nr1',
       name:'内容1',
       img:'../../image/1.jpeg',
       detail:'啊实打实大苏打发发安抚安抚安抚安抚啊发发生法发生发顺丰啊是否安抚啊是否啊发发'
     },
     {
       id: 'nr2',
       name: '内容2',
       img: '../../image/2.png',
       detail:'萨达飒飒打撒撒旦啊发发啊发顺丰啊师傅啊发发安抚啊发发啊发发啊发发安抚啊发'
     }
   ],
    tabHeadTop:0,
    fixed:false,
    scrollTop:0,
    swiperHeight:0
  },
  onLoad: function () {
   
  },
  onReady: function () {
    let that = this
    let query = wx.createSelectorQuery()
    query.select(".tab_wrap").boundingClientRect(function (res) {
       console.log(res.top) //距离页面顶部的距离
      that.setData({
        tabHeadTop: res.top
      })
    }).exec()
    query.select(".item_cont").boundingClientRect(function (res) {
        console.log(res)
      that.setData({
        item_cont: res.height
      })
    }).exec()
  },
  swiperchnage:function(e){
    this.setData({ currentIndex: e.detail.current})
    var tabHeadTop = this.data.tabHeadTop;
    // wx.pageScrollTo({
    //   scrollTop: tabHeadTop
    // })
  },
  tap:function(e){
    var that=this;
    var index=e.currentTarget.dataset.index;
    this.setData({ currentIndex:e.currentTarget.dataset.index});
    var tabHeadTop = this.data.tabHeadTop;
    let query = wx.createSelectorQuery();
    query.selectAll(".item_cont").boundingClientRect(function (res) {
      that.setData({
        item_cont: res[index].height
      })
    }).exec()
    // wx.pageScrollTo({
    //   scrollTop: tabHeadTop
    // })
 
  },
  onPageScroll: function (e) {
    this.setData({ scrollTop: e.scrollTop})
    if (e.scrollTop > this.data.tabHeadTop) {
      this.setData({
        fixed: true,
      })
 
 
    }else{
      this.setData({
        fixed: false
      })
      
    }
  },
 
})