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

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