网站侧边栏广告固定浮动效果的实现

　　对于页面内容很长的网站来说，经常会出现浏览内容的时候，侧栏已经空了，没内容了，这对于网站广告来说非常可以，如果侧栏空了之后能固定一个广告的话，那样对网站和用户双方的体验都不错，下面就说说具体实现的方法。

　　先在网站加入jquery.js，一般网站都已经加过这个js，因此可以跳过，没有用的网站则需要在网站header部分加入jquery.js代码。

　　之后，编辑侧栏模板，在侧栏最底部加入广告代码，代码如下：

　　<div id="float" class="float">

　　广告的HTML代码

　　</div>

　　最后，在网站底部增加如下的javascript代码即可：

$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$("#float").smartFloat();