jQuery固定浮动侧边栏的实现与代码

这个功能现在已经被广泛应用，如果网页是比较高的，当滚动条拖动时，页面下方的侧边栏将遵循一个固定的div浏览器框出现，这个想法是这样的：首先，要获得顶级div页面需要遵循的距离，然后判断，当浏览器滚动距离超过DIV本身当距离从顶部，添加CSS属性来固定。

代码如下

HTML代码：

头

侧边栏

主要
页脚

CSS代码：

{体
保证金：10px汽车；
字体族：无衬线字体；
宽度：500px；
}
{ div
边界半径：5px；
盒子的影子：1px 2px 5px RGBA（0,0,0,0.3）；
边境：1px solid # CCC；
填料：5px；
}
{ # sidebarwrap
身高：400px；
宽度：210px；
浮子：右边；
职位：相对；
阴影框：无；
边界：无；
保证金：0；
填充：0；
}
{ #主要
宽度：270px；
身高：4000px；
}
{ #页脚
清楚：两者；
10px保证金：0；
}
{ #边栏
宽度：200px；
身高：300px；
位置：绝对；
}
{ #头
身高：200px；
边距：10px；
}
{ # sidebar.fixed
位置：固定；
顶部：0；
}
#页脚高度：600px {；}
#页脚高度：600px {；}

Javaｓｃｒｉｐｔ代码：

$（函数（）{（））
var = $（#边栏）。偏移（）。顶parseFloat（$（' #边栏）。Css（'margintop）。更换（ /汽车/，0））；
foottop = $（var的#页脚）。偏移（）。顶parseFloat（$（' #页脚）。Css（'margintop）。更换（ /汽车/，0））；

VaR maxy = foottop $（' #边栏）。OuterHeight（）；

$（窗口），滚动（功能（EVT）{
var y =美元（这）ScrollTop（）；
如果（y =顶部）{
如果（y＜maxy）{
$（#边栏）。AddClass（固定的）RemoveAttr（'style）；
{人}
$（#边栏）。RemoveClass（固定的）。Css（{
位置：绝对的，
上图：（maxy顶）+ 'px
}）；
}
{人}
$（#边栏）。RemoveClass（固定的）；
}
}）；
}）；