首先什么是sticky效果呢

具体参照饿了么APP的商品列表页（小程序版本发现并未实现）
具体的效果及实现可以查看一下这个demo =>  sticky demo on codepen
简单地说就是标题会有粘黏的效果，向下滑动时跟着列表走，向上滑动到顶部时将会固定在顶部。

但是如果在不考虑兼容性的情况下（IOS6以上、 Safari9.1+、 chrome56+）
其实从CSS3开始有一个position属性sticky就能实现这种效果

{     position: sticky;     top: 0; }

只需要这两行就能实现，然而...然而兼容性那是相当的差，那么好用的一个属性为什么兼容性那么差呢？

那么饿了么的商品列表页在小程序中实有哪些步骤呢？

1. 利用scroll-view里的scroll-into-view属性，具体可查看小程序的文档

2. 实现sticky效果（可参照 codepen 的 demo）

3. 获取每个scroll-into-view的scrollTop

4. 监听scroll的滚动，并改变scroll-into-view

下来来让我们看一下具体该如何实现

<scroll-view scroll-y class="left-wrapper" id="left">   <view wx:for="..." bindtap="..."></view>   <!--这里是左侧的类型选择--> </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">         <!--这里是需要展示具体的列表项-->       </view>     </view>   </view> </scroll-view>

左侧列表页没什么好讲的，无非就是按下某个类型，给上一个checked样式，然后改变toView（关键）的值。
那么toView是什么呢？toView的值是和scroll-view里面你需要跳转的view的id对应起来的，也就是代码中的这个id

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

所以当左侧按下对应的按钮以后，右侧的scroll就会跳转到相应id的scroll-into-view里面，
其实到目前为止已经实现了sticky header + 跳转的问题了
但是...
如果滑动右侧的滚动条的话，左侧的数据如何跟着变化呢？
假如不是小程序的话应该很多人都知道怎么做，无非就是监听滚动条，判断滚动条的位置，然后根据区域去改变左侧的选择。
但是...
小程序如果获得scroll-into-view在scroll-view里面的位置呢？？？
小程序是没有类似document.getElementById()这种Dom操作的
也没法使用JQuery的$去快捷地获取scrollTop的
也不能像vue一样直接操作$el的
还好小程序在1.4时开放了一个接口wx.createSelectorQuery()

wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。

---

nodesRef.boundingClientRect([callback])
添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于DOM的getBoundingClientRect。返回值是nodesRef对应的selectorQuery。
返回的节点信息中，每个节点的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在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 ()的时候去做，否则将无法得到rect属性
得到这个属性以后其实就很好操作了，直接上代码了

onScroll (event) {   
    // 如果是右侧的滚动view   
    if (event.currentTarget.id === 'right') {     
        // 判断滚动的方向     
        let top = event.detail.scrollTop     
        this.dir = this.currentTop < top ? 'down' : 'up'     
        this.currentTop = top     
        // 判断当前滚动条所在区域，如果不在当前区域则进行跳转     
        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效果的商品列表页跳转功能就实现了。

坑

1. scroll-view必须设置高度，否则在IOS上将无法使用scroll-into-view跳转

2. 使用createSelectorQuery必须在页面渲染完成以后

存在问题

1. scroll会有个惯性运动，这时候按左侧的按钮切换scroll-into-view会和onScroll事件发生一些冲突，测试IOS存在有该问题，希望大神给予些指导意见。

说明

由于采用了wepy构建的小程序，所以在部分代码上会和小程序有出入（改过一些），主要是思路。
顺便丢个wepy的github
wepy的本意是希望小程序能像vue一样开发，由于本人一直在用vue做项目，所以用wepy开发小程序会顺手一些，但是wepy虽然尽力贴合vue，但在某些设计上存在着一定的问题，但相对来说比直接开发小程序用起来舒服一些。

碎碎念...谁能教教我怎么优雅地写好Markdown呢T.T

Github: github.com/lyh2668
AuthBy: lyh2668