网络上有很多相关的代码，更有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、如果区域高度超出窗口，何时开始跟随滚动？
这要看我们想给用户展示什么，如果是一个广告，如果是一段文字，如果是一个列表。我的设计是，当屏幕往下滚动，但是还没有将要显示的元素全部显示完整时，不进行任何效果，当屏幕滚动到元素的底部临界处时，效果触发，再往下滚动时，元素的底端和屏幕的底端对齐，元素的下部一直呈现在屏幕内。当然，不同的网页，你的设计自然不同，你也可能设计为，向下滚动时先没有效果，当滚动到某一个广告之后，这个广告和屏幕顶端对齐跟随滚动。
图一 跟随屏幕滚动逻辑设计图
从图一中我们来看一下这一设计思路。图中绿色部分为要跟随滚动的区域，灰色部分为整个网页，浅灰色部分为屏幕（能看到的区域）我们通过向下移动浅灰色的屏幕来模拟往下滚动滚动条。在①的阶段为初始阶段，这个时候网页一切照初始运作，没有任何动作。到②的阶段，屏幕向下滚动到一个临界点，即要跟随滚动区域的最低端。第③阶段是滚动过临界点之后，元素开始跟随屏幕滚动，我们可以看到，元素的底端和屏幕的底端对齐，元素的顶端已经看不到。第④个阶段的屏幕滚动到底部，可以想象，网页的底部是存在一些版权信息的，元素不能跟随滚到底部把这些信息遮住，因此在红线的地方就不再跟随滚动。
这是屏幕向下滚动的示意图，当屏幕向上滚动时，这是这个顺序的逆向。但是还有另外一个考虑，当屏幕在向上滚动时实现和向下滚动初始状的一种效果，即临界点是此时④中的绿色区域顶端，向上滚动时屏幕顶端和元素顶端对齐。出于技术难度的考虑，乌徒帮没有实现这一效果。
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下面是否已经没有了空白。