很多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库运行查看。看完想在自己博客加上这效果，应该就没啥难度吧！！