jquery fixed floating sidebar (jquery fixed Sidebar)

This feature is now very popular, if the page is relatively high, when the scroll bar to the bottom of the page, the sidebar will appear a fixed following the browser Div box, the idea is this: first get the div to follow the distance from the top of the page, and then judge, When the browser scrolls farther than the top distance from the div itself, add the CSS property fixed.

Code to copy code as follows
HTML code:

<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 code:
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;
}
#header {
height:200px;
Marg (www.111cn.net) in-bottom:10px;
}
#sidebar. Fixed {
position:fixed;
top:0;
}
#footer {height:600px;}
#footer {height:600px;}

JavaScript code:

$ (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 ();

$ (window). Scroll (function (evt) {
var y = $ (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 ');
}
});
});

From:http://www.111cn.net/wy/jquery/66377.htm

jquery fixed floating sidebar (jquery fixed Sidebar)