網(wǎng)站側(cè)邊欄廣告固定浮動效果的實現(xiàn)
對于頁面內(nèi)容很長的網(wǎng)站來說，經(jīng)常會出現(xiàn)瀏覽內(nèi)容的時候，側(cè)欄已經(jīng)空了，沒內(nèi)容了，這對于網(wǎng)站廣告來說非?？梢?，如果側(cè)欄空了之后能固定一個廣告的話，那樣對網(wǎng)站和用戶雙方的體驗都不錯，下面就說說具體實現(xiàn)的方法。
先在網(wǎng)站加入jquery.js，一般網(wǎng)站都已經(jīng)加過這個js，因此可以跳過，沒有用的網(wǎng)站則需要在網(wǎng)站header部分加入jquery.js代碼。
之后，編輯側(cè)欄模板，在側(cè)欄最底部加入廣告代碼，代碼如下：
<div id="float" class="float">
廣告的HTML代碼
</div>
最后，在網(wǎng)站底部增加如下的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();
來源：月光博客
