}
}
}else{ // 如果屏幕不处于左侧，就让这两个跟随归位
$(‘aside#catalogue’).css({‘position’:’static’,’top’:$catalogueOffsetTop});
$(‘#main’).css({‘padding-left’:’0′});
$(‘aside#archive’).css({‘position’:’static’,’top’:$archiveOffestTop,’left’:$archiveOffestLeft + ‘px’});
}
}).scroll().resize();
网络上有很多相关的代码，更有7行代码解决此问题的方法，甚至还有通用性的插件来实现此效果。然而它们都太过普遍化，对于不同的网站，特殊性不同，在一些细节上要做更多的考虑。
二、选择用什么方式跟随屏幕滚动
方案有三种：
1、使用position:absolute;然后对top值进行动态赋值；
2、使用position:fixed;然后对top值进行动态赋值；
3、对padding-top或margin-top进行动态赋值；
前两种都是用到了postion对元素的位置进行安排，和float一样，position将元素从正常的文本流中拖出来。而padding或margin的方法则是控制元素的边距来实现。到底哪一种好呢？
使用position:absolute;会出现滚动时发生抖动（火狐中不会） ，使用padding-top时会让有背景的元素看上去难看，也会发生抖动，使用position:fixed不支持IE6，使用margin-top没有尝试过，应该会发生抖动。本段代码选择的是position:fixed，唯一不发生抖动的方案，但是在IE6下不会有该效果。
三、要考虑的情况
之所以乌徒帮要将本站的代码拿出来讲解，是因为网上的代码没有具体分析，很多问题都没有考虑到。
1、要跟随的元素的高度和屏幕的高度进行比较
网上所有的代码考虑的是该区域的高度小于窗口高度的情况，因此代码很简单。当区域高度等于和大于窗口高度时，我们又会有新的考虑。
2、如果区域高度超出窗口，何时开始跟随滚动？
这要看我们想给用户展示什么，如果是一个广告，如果是一段文字，如果是一个列表。我的设计是，当屏幕往下滚动，但是还没有将要显示的元素全部显示完整时，不进行任何效果，当屏幕滚动到元素的底部临界处时，效果触发，再往下滚动时，元素的底端和屏幕的底端对齐，元素的下部一直呈现在屏幕内。当然，不同的网页，你的设计自然不同，你也可能设计为，向下滚动时先没有效果，当滚动到某一个广告之后，这个广告和屏幕顶端对齐跟随滚动。
图一 跟随屏幕滚动逻辑设计图
从图一中我们来看一下这一设计思路。图中绿色部分为要跟随滚动的区域，灰色部分为整个网页，浅灰色部分为屏幕（能看到的区域）我们通过向下移动浅灰色的屏幕来模拟往下滚动滚动条。在①的阶段为初始阶段，这个时候网页一切照初始运作，没有任何动作。到②的阶段，屏幕向下滚动到一个临界点，即要跟随滚动区域的最低端。第③阶段是滚动过临界点之后，元素开始跟随屏幕滚动，我们可以看到，元素的底端和屏幕的底端对齐，元素的顶端已经看不到。第④个阶段的屏幕滚动到底部，可以想象，网页的底部是存在一些版权信息的，元素不能跟随滚到底部把这些信息遮住，因此在红线的地方就不再跟随滚动。
