这是屏幕向下滚动的示意图，当屏幕向上滚动时，这是这个顺序的逆向。但是还有另外一个考虑，当屏幕在向上滚动时实现和向下滚动初始状的一种效果，即临界点是此时④中的绿色区域顶端，向上滚动时屏幕顶端和元素顶端对齐。出于技术难度的考虑，乌徒帮没有实现这一效果。
3、数和量的计算
在滚动时，我们要掌握好那些量是变化的，哪些又不变，在不变中找变，在变中找不变，总之要保持头脑清晰，分清如何去计算各种高度关系。
在图一中，我用了一条蓝色竖线来辅助高度计算，用红色的线指示屏幕和元素的位置，将蓝色竖线分成了a、b、c、d、e、f六段。那么他们之间有着哪些变化数量关系呢？（我们将绿色区域的元素定义为#myDiv，将版权信息在内的底部定义为#footer）
a+b+c+d+e+f=$(document).height();//文档高度，固定值
a= $(‘#myDiv’).offset().top;//#myDiv顶部到文档顶部的初始值，随着滚动，$(‘#myDiv’).offset().top将会变化
b=$(‘#myDiv’).height();//元素的高度，固定值
a+b+c=$(window).scrollTop()=$(docment).scrollTop();//滚动条的位置，即文档顶端到当前屏幕顶端的距离，不断变化中
d=$(window).height();//屏幕的高度，固定值
f=$(‘#footer’).height();//#footer的高度，固定值
a+b+c+d+e=$(‘#footer’).offset().top=$(document).height()-$(‘#footer’).height();//#footer顶部到文档顶部的距离，固定值，不过需要注意的是，$(‘#footer’).offset().top+$(‘#footer’).height()并非一定等于$(document).height()，你要看#footer下面是否已经没有了空白。
在整个变化过程中，变化的值只有$(window).scrollTop()=$(docment).scrollTop()和$(‘#myDiv’).offset().top，因此我们要抓住这些值之间的加减数量关系，做好逻辑判断和赋值。
4、值在什么时候获取
你可以看到，我在scroll事件之前事先获取了
var $catalogueOffsetTop = $(‘aside#catalogue’).offset().top;
var $archiveOffestTop = $(‘aside#archive’).offset().top;
var $archiveOffestLeft = $(‘aside#archive’).offset().left;
正是由于他们在scroll事件发生时会发生变化，因此要提前存放在变量中。
四、特殊情况特殊考虑
在写出这么多代码之前，我曾想过写出一个可以通用的代码，然而事情并非那么简单，在乌徒帮中，三个要滚动 的区域都具有特殊性，因此必须认真考虑他们的事件逻辑和仔细赋值。
1、元素是否自由随意
由于乌徒帮双击屏幕滑向右侧时出现的区域是自由的，顶部和底部没有阻挡信息，因此我们的处理更方便一些，不用获取顶部距离的初始值和考虑滚到底部时空出一段。但是仍然要考虑下面第2点，屏幕和元素高度的比较。
