固定滚动侧边栏实现方法

看到很多博客都采用了这种滚动侧边栏的方式。

好处显而易见，当博文较长的时候就不会因为侧边栏太短而产生不美观了。

那么小编今天给大家带来滚动侧边栏的教程，其实很简单，先来看看代码。

<!--html代码-->

<div id="side_box">
<div id="fixed_box" class="fixed_side">
<a href="http://www.emlog.net/download" target="bank_"><img src="img/cb.jpg" width="250"></a>
</div>
</div>
<!--先看我们html代码，html代码可以直接放在body中间即可-->

//侧栏跟随浏览器
$(function () {
if ($(".fixed_side").length > 0) {
var offset = $(".fixed_side").offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
//如果距离顶部的距离小于浏览器滚动的距离，则添加fixed属性。
if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
//否则清除fixed的css属性
else $(".fixed_side").removeClass("fixed");
});
}
});
//然后是我们的JS代码，这个可以直接放在模板下的任意JS文件中，也可以放在head中间。

/*侧边栏滚动*/
.fixed{position:fixed; top:20px; width:279px;}
/*最后加载CSS即可实现侧边栏随浏览器滚动了。*/ 

本文来自陈子文的博客