對于頁面內容很長的網站來說,經常會出現瀏覽內容的時候,側欄已經空了,沒內容了,這對于網站廣告來說非常可以,如果側欄空了之后能固定一個廣告的話,那樣對網站和用戶雙方的體驗都不錯,下面就說說具體實現的方法。
先在網站加入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();