我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告。那么这是怎么实现的呢？本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解。
一、原始代码
下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮网页两侧的边栏，以及双击屏幕后的右侧隐藏栏。
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() = $(window).height() && $('aside#catalogue').outerheight() 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 + $('footer').height())){$('#right-area').height($('footer').offset().top + $('footer').height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});}
3、自己网页内特殊情况的变化
乌徒帮由于左右还可以滚动，因此产生了一系列问题，position:fixed时左右方向上元素的距离并没有固定值，因此在进行左右滚动时，元素会遮住滚动完的屏幕，因此我又对$(document).scrollleft()进行了判断，进行了一些处理。
另外，乌徒帮还是一个自适应的网页设计网站，在不同宽度的屏幕上显示的效果也不同，js的特点是当屏幕发生变化时仍然起作用，因此，我也增加了屏幕宽度的判断。
总结
在跟随屏幕滚动这个问题上，原始的思路是很简单的，即通过本文列举的三种方案进行位置或距离的动态改变，然而，要在具体细节上把握好，必须对动态变化中的各个数值有所把握。于此同时，结合自己的网页，对不同情况下的动态效果有一个好的设计和规划，也是实现跟随屏幕滚动的关键环节。
以上这篇jquery跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。