網站側邊欄廣告固定浮動效果的實現
對于頁面內容很長的網站來說，經常會出現瀏覽內容的時候，側欄已經空了，沒內容了，這對于網站廣告來說非常可以，如果側欄空了之后能固定一個廣告的話，那樣對網站和用戶雙方的體驗都不錯，下面就說說具體實現的方法。
先在網站加入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();
來源：月光博客
Public @ 2009-05-01 15:45:17
