我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告。那么这是怎么实现的呢？本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解。
一、原始代码
下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮网页两侧的边栏，以及双击屏幕后的右侧隐藏栏。
var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;
$(window).bind('scroll resize',function(){
// #right-area的跟随屏幕滚动效果
if($('#right-area').height() <= $(window).height()){
$('#right-area').stop(true,true).animate({'top': $(document).scrollTop() + 'px'},800);
}else if($('#right-area').height() > $(window).height() && $('#right-area').height() < $(document).height()){
// 这段范围内是最关键的，允许滑动
if(($(document).scrollTop() + $(window).height()) <= $('#right-area').height()){
$('#right-area').stop(true,true).css('top','0');
}else if(($(document).scrollTop() + $(window).height()) < $(document).height()){
$right_top = $(document).scrollTop() + $(window).height() - $('#right-area').height();
$('#right-area').stop(true,true).animate({'top': $right_top + 'px'},800);
}else{
$right_top = $(document).height() - $('#right-area').height();
$('#right-area').stop(true,true).css({'top': $right_top + 'px'});
//alert($(document).scrollTop() + $(window).height() - $(document).height());
}
}else if($('#right-area').height() >= $(document).height()){
$('#right-area').height($(document).height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});
}
if($(document).scrollLeft() == 0){ // 只有在屏幕处于左侧的时候才进行下面的跟随滚动，同时需要注意下面的if($(window).width() > 1024)，是为了防止在小屏幕下还发生这种变化
// aside#catalogue的上下滑动
if($('aside#catalogue').outerHeight() < $(window).height()){
if($(document).scrollTop() <= $catalogueOffsetTop){
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
}else{
$('aside#catalogue').css({'position':'fixed','top':'0'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
}else if($('aside#catalogue').height() >= $(window).height() && $('aside#catalogue').outerHeight() < ($('footer').offset().top - $catalogueOffsetTop)){
if(($(document).scrollTop() + $(window).height()) <= ($('aside#catalogue').outerHeight() + $catalogueOffsetTop)){
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20;
$('aside#catalogue').css({'position':'fixed','top': $catalogue_top + 'px'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}else{
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20 - ($(document).height() - $('footer').offset().top);
$('aside#catalogue').css({'position':'fixed','top':$catalogue_top + 'px'});
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
}
// aside#archive的上下滑动
if($('aside#archive').outerHeight() < $(window).height()){
if($(document).scrollTop() <= $archiveOffestTop){
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}else{
$('aside#archive').css({'position':'fixed','top':'0','left':$archiveOffestLeft + 'px'});
}
}else if($('aside#archive').height() >= $(window).height() && $('aside#archive').outerHeight() < ($('footer').offset().top - $archiveOffestTop)){
if(($(document).scrollTop() + $(window).height()) <= ($('aside#archive').outerHeight() + $archiveOffestTop)){
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$catalogue_top = $(window).height() - $('aside#archive').outerHeight();
$('aside#archive').css({'position':'fixed','top': $catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}else{
$catalogue_top = $(window).height() - $('aside#archive').outerHeight() - ($(document).height() - $('footer').offset().top);
$('aside#archive').css({'position':'fixed','top':$catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}
}
}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、如果区域高度超出窗口，何时开始跟随滚动？
这要看我们想给用户展示什么，如果是一个广告，如果是一段文字，如果是一个列表。我的设计是，当屏幕往下滚动，但是还没有将要显示的元素全部显示完整时，不进行任何效果，当屏幕滚动到元素的底部临界处时，效果触发，再往下滚动时，元素的底端和屏幕的底端对齐，元素的下部一直呈现在屏幕内。当然，不同的网页，你的设计自然不同，你也可能设计为，向下滚动时先没有效果，当滚动到某一个广告之后，这个广告和屏幕顶端对齐跟随滚动。
图一 跟随屏幕滚动逻辑设计图
从图一中我们来看一下这一设计思路。图中绿色部分为要跟随滚动的区域，灰色部分为整个网页，浅灰色部分为屏幕（能看到的区域）我们通过向下移动浅灰色的屏幕来模拟往下滚动滚动条。在①的阶段为初始阶段，这个时候网页一切照初始运作，没有任何动作。到②的阶段，屏幕向下滚动到一个临界点，即要跟随滚动区域的最低端。第③阶段是滚动过临界点之后，元素开始跟随屏幕滚动，我们可以看到，元素的底端和屏幕的底端对齐，元素的顶端已经看不到。第④个阶段的屏幕滚动到底部，可以想象，网页的底部是存在一些版权信息的，元素不能跟随滚到底部把这些信息遮住，因此在红线的地方就不再跟随滚动。
这是屏幕向下滚动的示意图，当屏幕向上滚动时，这是这个顺序的逆向。但是还有另外一个考虑，当屏幕在向上滚动时实现和向下滚动初始状的一种效果，即临界点是此时④中的绿色区域顶端，向上滚动时屏幕顶端和元素顶端对齐。出于技术难度的考虑，乌徒帮没有实现这一效果。
3、数和量的计算
在滚动时，我们要掌握好那些量是变化的，哪些又不变，在不变中找变，在变中找不变，总之要保持头脑清晰，分清如何去计算各种高度关系。
在图一中，我用了一条蓝色竖线来辅助高度计算，用红色的线指示屏幕和元素的位置，将蓝色竖线分成了a