网页中的滚动监听

什么是滚动监听？滚动监听能够获取用户在阅读网页时的进度，并以导航的形式来显示这个进度（一般是侧边导航的形式）。防止用户在阅读较长的页面时“迷失方向”，并且能快速的实现阅读页面位置的跳转。说得再多，不如介绍一个例子！看下文……咳咳，不过今天不是专门介绍滚动监听的，而是介绍滚动监听的实现过程。

百度百科的滚动监听

百度一下，随便搜索一个关键字，找到它的百度百科资料，向下滚动，很经典的一个滚动监听就出现了。左侧是阅读的内容区域，右侧导航显示了当前阅读的位置，点击右侧导航可以显示到相应的内容区域。

寻找原理

看下面的gif图，在点击右侧导航时发生了两件事，一是导航指示发生改变，二是相应内容区域接近页面顶部。结论：触发点击事件时，导航active发生改变，并将页面滚动到对应内容的位置。

接着往下看，当页面滚动到相应内容区域时，右侧导航指示会紧跟着变化。结论：触发滚动事件时，将滚动距离和内容相对页面顶部位置进行比较，通过判断进而改变导航的active。

jQuery写交互

1、储存每个内容对应的页面位置。并且还要设置一个缓冲值，因为我们并不需要内容正好滚动到窗口顶部才触发事件，而是快接近时触发。

2、给窗口添加scroll事件，并用变量储存滚动的距离，然后将滚动的距离和内容相对页面的位置的值进行比较，再给相应的导航添加active。

3、给导航添加点击事件，让整个页面滚动到对应的内容区域。（很尴尬，这段代码不知道怎么简化。）

最后大表哥看不下去了，教我这样写的。^_^