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

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

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

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

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

广告的HTML代码

</div>

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

$.fn.smartFloat = function() {

var position = function(element) {

var = element.position()., pos = element.css("position");

$(wdow).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > ) {

if (wdow.XMLHttpRequest) {

element.css({

position: "fixed",

: 0

});

} else {

element.css({

: scrolls

});

}

}else {

element.css({

position: pos,

:

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

$("#float").smartFloat();

推火专家月光博客