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'); } }); });