php 侧边栏效果,wordpress博客侧边栏滚动定位效果

很多wordpress博客都会有个侧边栏滚动定位效果：

当拖动滚动条到第1个临界值时，一固定区域块以随页面滚动而一直显示在页面一固定的视觉区域;

当拖动滚动条到第2个临界值时,这一固定区域块以“固定位置”的形式钉在页面上显示;

当页面滚动条回到页面顶部时，这一固定区域块又恢复正常的显示状态！

呵，这一描述，感觉有点抽象，具体效果直接看本站右侧边栏上的“搜索”版块！

关键源代码：

.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%;}

$(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="红色区域当前定位top值：";

}else if(dValue>=0){

$(".sideBar").css('top',fTop-$(".sideBar").height());

//调试语句：

debugInfo="红色区域接触到页脚，就被固定top值：";

}else{

$(".sideBar").css("position","static");

}

$(".sideBar span").html(debugInfo+$(".sideBar").css('top'));

})

});

页头

内容填充

拖动滚动条，实时显示红色区域定位值！！

页脚

具体运行效果，建议读者拷贝上面代码并在本地加载jq库运行查看。看完想在自己博客加上这效果，应该就没啥难度吧！！