【小程序】导航条带颜色吸顶的实现方案

先总结一个简单的例子
雅思小程序，领资料页 pages/materials/materials，上划页面，分组标签吸顶后，显示导航条

实现方案：
1. 自定义导航条，默认透明度为0，吸顶后，透明度设置成1，就显示了带标题的导航
wxml:
<materialNav title='雅思备考资料' isBlack='true' opacity='{{isSticky ? 1 : 0}}'></materialNav>
js:

 onPageScroll(e){
    // 设置吸顶距离, 判断是否吸顶
    this.setData({
      isSticky: e.scrollTop > this.data.scrollDis
    })
  },

这里scrollDis 是什么呢？ 这个是吸顶的元素从未吸顶状态转换成吸顶状态需要向上滚动的距离，需要我们自己计算：

  getScrollDistance(){
    let query = wx.createSelectorQuery().in(this);
    query.select('.stickSection').boundingClientRect((rect) => {
      this.setData({
        scrollDis:rect.top - this.data.navH
      })
    }).exec()
  },

这里的stickSection就是吸顶元素：分组标签的类名
wxml:

<view class="stickSection" style="top: {{navH}}px;">
      <view class="ssItemBox">
        <view class="ssItem" wx:for="{{list}}" bindtap="sectionItemTap" data-idx="{{index}}" data-item="{{item}}">
          <text class="ssiText {{currentIdx == index ? 'ssActive' : ''}}">{{item.title}}</text>
          <view class="ssBar" wx:if="{{currentIdx == index}}">
          </view>
        </view>
      </view>
    </view>

navH是导航条的高度

2.分组标签stickSection的position设置为sticky：
wxss:

.stickSection {
  display: flex;
  flex-direction: column;
  position: sticky;
  z-index: 1;
  background: white;
  width: 100%;
  margin-top: 32rpx;
  padding-bottom: 32rpx;
  box-sizing: border-box;
  padding-left: 66rpx;
}

下面总结另外一种导航条
效果如下
(路径：pages/paperHome/paperHome;
提交版本：科目题库、国际竞赛题库内容列表页，点击下载图标时，都显示下载提示弹窗（样式同智能组卷）
Commit:
8ef15007095627d830119f54e9e4e000b9b59444 [8ef1500]
Parents:
8d1d2a7863
Date:
February 23, 2023 at 13:46:45 GMT+8
Labels:
HEAD master origin/master origin/HEAD)

难点是导航条A层级在最上，导航条的背景图B也就是在最上层，但是导航条下面的图片B要在最下，这样滚动下面的内容，下面的内容才能在图片的上层
B既要在最上层，又要在最下层，矛盾了。解决办法是加一层图片，导航条下面的图片不用 B,用一张新图C
wxml:

<homePartNav hasCustomBack='true' bgImg='{{sData.auth_info.auth_info.bg_image}}' bind:heightCallBack='heightCallBack' bind:backEvent='gonglueTap'></homePartNav>
      <view class="authTopBox">
        <image src="{{sData.auth_info.auth_info.bg_image}}" mode="" class="authTopBg" />
        <view class="atContent" style="background-image: url(https://resource.gximg.cn/523a1f_wm3HTmddyD.png);" bindtap="authTap">
          <view class="atcTop">
            <view class="atcLeft" wx:if="{{sData.auth_info.auth_info.role_id == 1}}">

                <image src="../../images/paper/t_img_idcard_in.png" mode="" class="actlIcon" />
                <text class="actName">{{sData.auth_info.auth_info.name}}</text>

            </view>

            <view class="atcLeft" wx:else="" style="width: auto;">
              <image src="../../images/paper/nimg_idcard_in.png" mode="" class="actlIcon aiNarrow" />
              <text class="actlText">{{sData.auth_info.auth_info.top_text}}</text>
            </view>
            <view class="atcRight">
              <text class="actrText">认证</text>
              <image src="../../images/paper/img_next_student.png" mode="" class="actArrow" />
            </view>
          </view>
          <text class="actTitle">{{sData.auth_info.auth_info.desc[0]}}</text>
          <text class="actTime">{{sData.auth_info.auth_info.sub_text}}</text>
        </view>
      </view>

类名authTopBg就是上面说的新图C
再看一下导航条的结构：

<view class='navigation' style='height:{{safeTop+navHeight}}px;opacity:{{opacity}};background: {{backgroundColor}}; background: url("{{bgImg}}");' bindtap="backTap">
  <view class='status' style='height:{{safeTop}}px;'></view>
  <view class='nav' style='height:{{navHeight}}px;'>
    <view class='navigationTitle'>
    </view>
  </view>
</view>

这里 class='navigation'的 background: url("{{bgImg}}");' 就是上文说的背景图B，当然这个背景图只展示了上半部分，下半部分是不展示的。下面是navigation 的样式：

.navigation {
  top: 0rpx;
  width: 100%;
  position: fixed;
  background: #F4F6FB;
  z-index: 998;
  background-size: cover !important;
}

注意 background-size: cover !important;****

所以说遇到不好解决的问题，尝试加一层，可能就解决问题了