我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告。那么这是怎么实现的呢？本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解。
一、原始代码
下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮网页两侧的边栏，以及双击屏幕后的右侧隐藏栏。
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();