jQuery固定浮动侧边栏（jQueryfixedSidebar）
这个功能现在应⽤的⾮常普遍，如果页⾯⽐较⾼，当滚动条拖到页⾯的下⾯的时候，侧边栏会出现⼀个固定跟随浏览器的DIV框，现思路是这样的：⾸先获取需要跟随的DIV距离页⾯顶部的距离，然后判断，当浏览器滚动的距离⼤于该DIV本⾝距离顶部距离的时候，则添加CSS 属性fixed即可。
代码如下 复制代码
HTML代码：
<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>
CSS代码：
body {
margin: 10px auto;
font-family: sans-serif;
width: 500px;
}
div {
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border: 1px solid #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: 10px 0;
}
#sidebar {
width: 200px;
height: 300px;
position: absolute;
}
borderbox#header {
height: 200px;
marg(www.111cn)in-bottom: 10px;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer { height: 600px; }
#footer { height: 600px; }
JavaScript代码：
$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#sidebar').outerHeight();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。