我们在很多网站看到，当我们转动网页时，网页内的告白或某个小区域其实不会消失，而是浮动在屏幕的某个处所，特别是一些局域告白。那么这是怎么实现的呢？本文将引用乌徒帮的跟从屏幕转动代码，对此效果做详解。

一、原始代码

下面是乌徒帮的跟从屏幕转动代码，它的作用域为网页两侧的边栏，以及双击屏幕后的右侧隐藏栏。

var $catalogueOffsetTop = $('aside#catalogue').offset();var $archiveOffestTop = $('aside#archive').offset();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() - $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()){$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());$('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() - $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()){$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());$('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();