我們在許多網站上看到，當我們滾動網頁時，網頁內的廣告或某個小區域並不會消失，而是浮動在螢幕的某個地方，特別是一些區域廣告。那麼這是怎麼實現的呢？本文將引用烏徒幫的跟隨畫面滾動程式碼，對此效果做詳解。
一、原始碼
下面是烏徒幫的跟隨螢幕滾動程式碼，它的作用域為烏徒幫網頁兩側的邊欄，以及雙擊螢幕後的右側隱藏欄。
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();
網路上有很多相關的程式碼，更有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:fixed，唯一不會發生抖動的方案，但在IE6下不會有該效果。
三、要考慮的情況
之所以烏徒幫要將本站的程式碼拿出來講解，是因為網路上的程式碼沒有具體分析，很多問題都沒有考慮到。
1、要跟隨的元素的高度和螢幕的高度進行比較
網路上所有的程式碼考慮的是該區域的高度小於視窗高度的情況，因此程式碼很簡單。當區域高度等於和大於視窗高度時，我們又會有新的考慮。
2、如果區域高度超出窗口，何時開始跟隨滾動？
這要看我們想給用戶看什麼，如果是一個廣告，如果是一段文字，如果是一個清單。我的設計是，當螢幕往下捲動，但是還沒有將要顯示的元素全部顯示完整時，不進行任何效果，當螢幕滾動到元素的底部臨界處時，效果觸發，再往下滾動時，元素的底端和螢幕的底端對齊，元素的下部一直呈現在螢幕內。當然，不同的網頁，你的設計自然不同，你也可能設計為，向下滾動時先沒有效果，當滾動到某一個廣告之後，這個廣告和屏幕頂端對齊跟隨滾動。
圖一 跟隨螢幕捲動邏輯設計圖
從圖一我們來看一下這一設計思路。圖中綠色部分為要跟隨滾動的區域，灰色部分為整個網頁，淺灰色部分為屏幕（能看到的區域）我們通過向下移動淺灰色的屏幕來模擬向下滾動滾動條。在①的階段為初始階段，這個時候網頁一切照初始運作，沒有任何動作。到②的階段，螢幕向下捲動到一個臨界點，也就是要跟隨滾動區域的最低端。 ③階段是捲動過臨界點之後，元素開始跟著螢幕捲動，我們可以看到，元素的底端和螢幕的底端對齊，元素的頂端已經看不到。第④個階段的螢幕滾動到底部，可以想像，網頁的底部是存在一些版權資訊的，元素不能跟隨滾到底部把這些資訊遮住，因此在紅線的地方就不再跟隨滾動。
這是螢幕向下滾動的示意圖，當螢幕向上滾動時，這是這個順序的逆向。但還有另一個考慮，當螢幕在向上滾動時實現和向下滾動初始狀的一種效果，即臨界點是此時④中的綠色區域頂端，向上滾動時螢幕頂端和元素頂端對齊。出於技術難度的考慮，烏徒幫並沒有達到這個效果。
3、數和量的計算
在滾動時，我們要掌握好那些量是變化的，哪些又不變，在不變中找變，在變中找不變，總之要保持頭腦清晰，分清如何去計算各種高度關係。
在圖一中，我用了一條藍色豎線來輔助高度計算，用紅色的線指示屏幕和元素的位置，將藍色豎線分成了a、b、c、d、e、f六段。那麼他們之間有哪些變化數量關係呢？ （我們將綠色區域的元素定義為#myDiv，將版權資訊在內的底部定義為#footer）
a+b+c+d+e+f=$(document).height();//文档高度，固定值
a= $('#myDiv').offset().top;//#myDiv顶部到文档顶部的初始值，随着滚动，$('#myDiv').offset().top将会变化
b=$('#myDiv').height();//元素的高度，固定值
a+b+c=$(window).scrollTop()=$(docment).scrollTop();//滚动条的位置，即文档顶端到当前屏幕顶端的距离，不断变化中
d=$(window).height();//屏幕的高度，固定值
f=$('#footer').height();//#footer的高度，固定值
a+b+c+d+e=$('#footer').offset().top=$(document).height()-$('#footer').height();//#footer顶部到文档顶部的距离，固定值，不过需要注意的是，$('#footer').offset().top+$('#footer').height()并非一定等于$(document).height()，你要看#footer下面是否已经没有了空白。
在整个变化过程中，变化的值只有$(window).scrollTop()=$(docment).scrollTop()和$('#myDiv').offset().top，因此我们要抓住这些值之间的加减数量关系，做好逻辑判断和赋值。
4、值在什么时候获取
你可以看到，我在scroll事件之前事先获取了
var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;
正是由于他们在scroll事件发生时会发生变化，因此要提前存放在变量中。
四、特殊情况特殊考虑
在写出这么多代码之前，我曾想过写出一个可以通用的代码，然而事情并非那么简单，在乌徒帮中，三个要滚动 的区域都具有特殊性，因此必须认真考虑他们的事件逻辑和仔细赋值。
1、元素是否自由随意
由于乌徒帮双击屏幕滑向右侧时出现的区域是自由的，顶部和底部没有阻挡信息，因此我们的处理更方便一些，不用获取顶部距离的初始值和考虑滚到底部时空出一段。但是仍然要考虑下面第2点，屏幕和元素高度的比较。
而对于边侧栏的滚到，我们要考虑边侧栏顶部到文档顶部还有一段距离，底部还有版权信息。滚到的位置要通过上文获得的值，再配合css中获得的值进行精确计算。
2、判断元素的高度和屏幕高度之间的关系
当元素高度小的时候，我们的处理比较简单，只需要将元素顶端和屏幕顶端对齐，和上面第1点结合，也会出现不同的情况：如果元素顶部到文档顶部还有一段距离的话，我们还不能屏幕一滚动就开始让它和屏幕顶端对齐，而必须滚到它的顶端这个临界点的时候才可以开始。
而当元素的高度大于屏幕的高度的时候，我们要进行更复杂的判断，和第1点判断何时开始跟随滚动：只有当屏幕的底端和元素底端对齐时，元素开始跟随屏幕滚动。
但是还有一种情况，即元素的高度超出了我们想要的高度，我们可以使用overflow来对元素进行处理，这时我们通过元素的高度和页面中一些固定值的比较来处理这一环节。乌徒帮通过比较右侧元素的高度和底部的关系来进行overflow的处理：
......
}else if($('#right-area').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跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
