很多wordpress部落格都會有個側邊欄滾動定位效果：

當拖動滾動條到第1個臨界值時，一固定區域塊以隨頁面滾動而一直顯示在頁面一固定的視覺區域;

當拖動滾動條到第2個臨界值時,這一固定區域塊以“固定位置”的形式釘在頁面上顯示;

當頁面滾動條回到頁面頂部時，這一固定區域塊又恢復正常的顯示狀態！

呵，這一描述，感覺有點抽象，具體效果直接看本站右側邊欄上的“搜尋”版塊！

關鍵原始碼：

	<style type="text/css">
	.w1{width:600px; margin:0 auto; position:relative;}
	.header{height:150px; background:#9FF;}
	.main{height:1000px; background:#9F6;}
	.footer{height:300px; background:#06C;}
	.sideBar{width:200px; height:680px; background:#f00;float:right;}
	.sideBar span{ position: absolute;left:0; bottom:50%;}
	</style>
	<script type="text/javascript">
	$(document).ready(function($){
	var debugInfo='';
	var sbTop=$(".sideBar").offset().top;
	var fTop=$(".footer").offset().top;
	$(window).scroll(sbEvent=function(){
	    var wTop=$(window).scrollTop();
	    var dValue=wTop+$(".sideBar").height()-fTop;//差值
	    if(wTop>sbTop&&dValue<0){
	        $(".sideBar").css({
	            position:"absolute",
	            right:0,
	            top:wTop
	            })
	    //除錯語句：
	    debugInfo="紅色區域<b>當前定位top值</b>：";
	    }else if(dValue>=0){
	        $(".sideBar").css('top',fTop-$(".sideBar").height());
	    //除錯語句：
	    debugInfo="紅色區域接觸到頁尾，<b>就被固定top值</b>：";
	      }else{
	          $(".sideBar").css("position","static");
	          }
	    $(".sideBar span").html(debugInfo+$(".sideBar").css('top'));
	})
	});
	</script>
	<div class="w1">
	<div class="header">頁頭</div>
	<div class="main">內容填充
	    <div class="sideBar">
	        <b>拖動滾動條，實時顯示紅色區域定位值！！</b>
	        <span></span>
	    </div>
	</div>
	<div class="footer">頁尾</div>
	</div>

具體執行效果，建議讀者拷貝上面程式碼並在本地載入jq庫執行檢視。看完想在自己部落格加上這效果，應該就沒啥難度吧！！