jQuery固定浮动侧边栏实现思路及代码
这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
代码如下
HTML代码：
<divid="header">header</div> <divid="sidebarWrap"> <divid="sidebar">Sidebar</div> </div> <divid="main">Main</div> <divid="footer">footer</div>
CSS代码：
body{
margin:10pxauto;
font-family:sans-serif;
width:500px;
}
div{
border-radius:5px;
box-shadow:1px2px5pxrgba(0,0,0,0.3);
border:1pxsolid#ccc;
padding:5px;
}
#sidebarWrap{
height:400px;
width:210px;
float:right;
position:relative;
box-shadow:none;
border:none;
margin:0;
padding:0;
}
#main{
width:270px;
height:4000px;
}
#footer{
clear:both;
margin:10px0;
}
#sidebar{
width:200px;
height:300px;
position:absolute;
}
#header{
height:200px;
margin-bottom:10px;
}
#sidebar.fixed{
position:fixed;
top:0;
}
#footer{height:600px;}
#footer{height:600px;}
JavaScript代码：
$(function(){
vartop=$('#sidebar').offset().top-parseFloat($('#sidebar').css('marginTop').replace(/auto/,0));
varfootTop=$('#footer').offset().top-parseFloat($('#footer').css('marginTop').replace(/auto/,0));
varmaxY=footTop-$('#sidebar').outerHeight();
$(window).scroll(function(evt){
vary=$(this).scrollTop();
if(y>top){
if(y<maxY){
$('#sidebar').addClass('fixed').removeAttr('style');
}else{
$('#sidebar').removeClass('fixed').css({
position:'absolute',
top:(maxY-top)+'px'
});
}
}else{
$('#sidebar').removeClass('fixed');
}
});
});