基于jquery的跟随屏幕滚动代码

我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告,那么这是怎么实现的呢？本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解。一、原始代码下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮网页两侧的边栏，以及双击屏幕后的右侧隐藏栏。代码如下:var$catalogueOffsetTop=$('aside#catalogue').offset().top;var$archiveOffestTop=$('aside#archive').offset().top;var$archiveOffestLeft=$('aside#archive').offset().left;$(window).bind('scrollresize',function(){//#right-area的跟随屏幕滚动效果if($('#right-area').height()=$(window).height()){$('#right-area').stop(true,true).animate({'top':$(document).scrollTop()+'px'},800);}elseif($('#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');}elseif(($(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{=$(document).height()-$('#right-area').height();$('#right-area').stop(true,true).css({'top':$right_top+'px'});//alert($(document).scrollTop()+$(window).height()-$(document).height());}}elseif($('#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'});}}elseif($('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'});}elseif(($(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'});}}elseif($('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'});}elseif(($(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、如果区域高度超出窗口，何时开始跟随滚动？这要看我们想给用户展示什么，如果是一个广告，如果是一段文字，如果是一个列表。我的设计是，当屏幕往下滚动，但是还没有将要显示的元素