微信小程序-导航吸顶+view锚点

导航栏滑动定位+view锚点

我们在做小程序的时候，难免会遇到页面里面有很长的数据，页面下面又有到导航栏部分；用户希望页面滑动到导航栏的位置，导航栏固定在页面的最上面，同时里面的数变化，也能改变导航栏的高亮。

效果图

图1：

图2：

图3：

实现原理

通过对scroll的监听获取滚动条的scrollTop值;
在导航的下子集class判断距离整个页面Top;
吸顶—position:sticky

WXML

我是用自定义组件来写的

<rui-sticky scroll="{
   {curNodes}}" bindstickyscroll="getScrollTop">
  <view slot="stickychild">
    <view class='flex-row border_b mar-t bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list1</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list2</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list3</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list4</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list5</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list6</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list7</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <view class='flex-row border_b  bg_white uinn'>
      <view class='flex1 flex-row'>
        <view class='s_width1 colorTitle'>list8</view>
        <input type='text' class='flex1' value='' disabled='true' />
      </view>
    </view>
    <!-- 导航栏组件 -->
    <rui-content navcur='{
   {navcur}}' bind:compontpass="compontpass" bind:myevent='myevent'> </rui-content>
  </view>
</rui-sticky>

WXSS

//所有的css
.rui-flex-content {
   
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rui-nav-flex {
   
  background-color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.rui-goods-content {
   
  padding-top: