首先什么是sticky效果呢

具體參照餓了么APP的商品列表頁(yè)（小程序版本發(fā)現(xiàn)并未實(shí)現(xiàn)）
具體的效果及實(shí)現(xiàn)可以查看一下這個(gè)demo => sticky demo on codepen
簡(jiǎn)單地說(shuō)就是標(biāo)題會(huì)有粘黏的效果，向下滑動(dòng)時(shí)跟著列表走，向上滑動(dòng)到頂部時(shí)將會(huì)固定在頂部。

但是如果在不考慮兼容性的情況下（IOS6以上、 Safari9.1+、 chrome56+）
其實(shí)從CSS3開(kāi)始有一個(gè)position屬性sticky就能實(shí)現(xiàn)這種效果

{
    position: sticky;
    top: 0;
}

只需要這兩行就能實(shí)現(xiàn)，然而...然而兼容性那是相當(dāng)?shù)牟?，那么好用的一個(gè)屬性為什么兼容性那么差呢？

那么餓了么的商品列表頁(yè)在小程序中實(shí)有哪些步驟呢？

1. 利用scroll-view里的scroll-into-view屬性，具體可查看小程序的文檔
2. 實(shí)現(xiàn)sticky效果（可參照 codepen 的 demo）
3. 獲取每個(gè)scroll-into-view的scrollTop
4. 監(jiān)聽(tīng)scroll的滾動(dòng)，并改變scroll-into-view

下來(lái)來(lái)讓我們看一下具體該如何實(shí)現(xiàn)

<scroll-view scroll-y class="left-wrapper" id="left">
  <view wx:for="..." bindtap="..."></view>
  <!--這里是左側(cè)的類型選擇-->
</scroll-view>
<scroll-view scroll-y
             class="right-wrapper"
             bindscroll="onScroll"
             scroll-into-view="{{toView}}"
             id="right">
  <view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">
    <view class="type-title" style="{{style}}">
      <!-- 這個(gè)就是ticky header部分 -->
      {{item.title}}
    </view>
    <view class="content">
      <view wx:for="{{item.child}}" class="item">
        <!--這里是需要展示具體的列表項(xiàng)-->
      </view>
    </view>
  </view>
</scroll-view>

左側(cè)列表頁(yè)沒(méi)什么好講的，無(wú)非就是按下某個(gè)類型，給上一個(gè)checked樣式，然后改變toView（關(guān)鍵）的值。
那么toView是什么呢？toView的值是和scroll-view里面你需要跳轉(zhuǎn)的view的id對(duì)應(yīng)起來(lái)的，也就是代碼中的這個(gè)id

<view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">

所以當(dāng)左側(cè)按下對(duì)應(yīng)的按鈕以后，右側(cè)的scroll就會(huì)跳轉(zhuǎn)到相應(yīng)id的scroll-into-view里面，
其實(shí)到目前為止已經(jīng)實(shí)現(xiàn)了sticky header + 跳轉(zhuǎn)的問(wèn)題了
但是...
如果滑動(dòng)右側(cè)的滾動(dòng)條的話，左側(cè)的數(shù)據(jù)如何跟著變化呢？
假如不是小程序的話應(yīng)該很多人都知道怎么做，無(wú)非就是監(jiān)聽(tīng)滾動(dòng)條，判斷滾動(dòng)條的位置，然后根據(jù)區(qū)域去改變左側(cè)的選擇。
但是...
小程序如果獲得scroll-into-view在scroll-view里面的位置呢？？？
小程序是沒(méi)有類似document.getElementById()這種Dom操作的
也沒(méi)法使用JQuery的$去快捷地獲取scrollTop的
也不能像vue一樣直接操作$el的
還好小程序在1.4時(shí)開(kāi)放了一個(gè)接口wx.createSelectorQuery()

wx.createSelectorQuery()
返回一個(gè)SelectorQuery對(duì)象實(shí)例。可以在這個(gè)實(shí)例上使用select等方法選擇節(jié)點(diǎn)，并使用boundingClientRect等方法選擇需要查詢的信息。

---

nodesRef.boundingClientRect([callback])
添加節(jié)點(diǎn)的布局位置的查詢請(qǐng)求，相對(duì)于顯示區(qū)域，以像素為單位。其功能類似于DOM的getBoundingClientRect。返回值是nodesRef對(duì)應(yīng)的selectorQuery。
返回的節(jié)點(diǎn)信息中，每個(gè)節(jié)點(diǎn)的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回調(diào)函數(shù)，在執(zhí)行selectQuery的exec方法后，節(jié)點(diǎn)信息會(huì)在callback中返回。
然后可以通過(guò)這個(gè)方法拿到所有的scroll-into-view的位置

let query = wepy.createSelectorQuery()
for (let i = 0; i < this.types.length; ++i) {
  let id = this.types[i]
  query.select(`#${id}`).boundingClientRect((rect) => {
    this.scrollTops[id] = rect.top
  }).exec()
}

特別注意
這個(gè)操作必須得放在onReady ()的時(shí)候去做，否則將無(wú)法得到rect屬性
得到這個(gè)屬性以后其實(shí)就很好操作了，直接上代碼了

onScroll (event) {
  // 如果是右側(cè)的滾動(dòng)view
  if (event.currentTarget.id === 'right') {
    // 判斷滾動(dòng)的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop < top ? 'down' : 'up'
    this.currentTop = top
    // 判斷當(dāng)前滾動(dòng)條所在區(qū)域，如果不在當(dāng)前區(qū)域則進(jìn)行跳轉(zhuǎn)
    if (top > this.scrollTops[this.getNextView()] &&
        this.dir === 'down' &&
        this.checked < this.types.length - 1) {
      this.setChecked(this.checked + 1)
    }
    if (top < this.scrollTops[this.toView] &&
        this.dir === 'up' &&
        this.checked > 0) {
      this.setChecked(this.checked - 1)
    }
  }
}

然后一個(gè)簡(jiǎn)單的具有sticky效果的商品列表頁(yè)跳轉(zhuǎn)功能就實(shí)現(xiàn)了。

坑

1. scroll-view必須設(shè)置高度，否則在IOS上將無(wú)法使用scroll-into-view跳轉(zhuǎn)
2. 使用createSelectorQuery必須在頁(yè)面渲染完成以后

存在問(wèn)題

1. scroll會(huì)有個(gè)慣性運(yùn)動(dòng)，這時(shí)候按左側(cè)的按鈕切換scroll-into-view會(huì)和onScroll事件發(fā)生一些沖突，測(cè)試IOS存在有該問(wèn)題，希望大神給予些指導(dǎo)意見(jiàn)。

說(shuō)明

由于采用了wepy構(gòu)建的小程序，所以在部分代碼上會(huì)和小程序有出入（改過(guò)一些），主要是思路。
順便丟個(gè)wepy的github
wepy的本意是希望小程序能像vue一樣開(kāi)發(fā)，由于本人一直在用vue做項(xiàng)目，所以用wepy開(kāi)發(fā)小程序會(huì)順手一些，但是wepy雖然盡力貼合vue，但在某些設(shè)計(jì)上存在著一定的問(wèn)題，但相對(duì)來(lái)說(shuō)比直接開(kāi)發(fā)小程序用起來(lái)舒服一些。