首先什么是sticky效果呢

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

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

{
    position: sticky;
    top: 0;
}

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

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

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

下來來讓我們看一下具體該如何實(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}}">
      <!-- 這個就是ticky header部分 -->
      {{item.title}}
    </view>
    <view class="content">
      <view wx:for="{{item.child}}" class="item">
        <!--這里是需要展示具體的列表項(xiàng)-->
      </view>
    </view>
  </view>
</scroll-view>

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

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

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

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

---

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

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

onScroll (event) {
  // 如果是右側(cè)的滾動view
  if (event.currentTarget.id === 'right') {
    // 判斷滾動的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop < top ? 'down' : 'up'
    this.currentTop = top
    // 判斷當(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)
    }
  }
}

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

坑

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

存在問題

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

說明

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