Bài viết này hướng dẫn cách thức chèn banner trượt có giới hạn tại vị trí sidebar cho vbb.

Xem hình demo bên dưới

Hình 1: nhấp vào hình để xem rỏ hơn

Hình 2: nhấp vào hình để xem rỏ hơn

Để làm 1 banner trượt như thế này cho vbb thì trước tiên chúng ta cần 1 file jquery, ở đây chúng ta lạy luôn của google cho tiện (có thể download về và upload lên host). Tiến hành khai báo file này và thêm 1 đoạn script tại header

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){


    $(window).scroll(function(){
        if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
           $(".smartbanner").css("position", "fixed");
           $(".smartbanner").css("top", "0");
        }
       
        if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
           $(".smartbanner").css("position", "relative");
           $(".smartbanner").css("top", $(".smartBannerIdentifier").offset);
        }
    });


});
</script>

Tiếp theo là đến phần CSS cho banner quảng cáo. Vào additional.css theo phần sau vào

.smartbanner {
    width:258px;
    background-color: #FF0000;
    float: right;
}

Có thể tùy chỉnh các thông số cho phù hợp với forum.
Giờ  đến code chèn quảng cáo cho sidebar. Vào forumhome chèn đoạn code này dưới phần {vb:raw sidebar}

<div class="smartBannerIdentifier"></div>
<div class="smartbanner">
<img src="http://fc02.deviantart.net/fs70/f/2012/032/d/4/ads_logo_by_aliirules-d4ob2by.png" width="100%">   
</div>