jquery跟随屏幕滚动代码.doc

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