赵凯华的博客

想在博客右侧栏下面添加一个广告，并且需要让广告随着窗口滚动，始终处于可见状态。使用js和css可以完美实现这样的效果。我为了方便，没有做成插件，而是直接在sidebar.php中添加了代码。

首先添加HTML代码

    <div id="ad_box" style=" position:relative;text-align:center;width:338px;">
	<div id="float_ad">
		这里是广告代码,div的宽度，大家根据需要，自行设定
        </div>
    </div>

然后添加js代码：在此之前，需要引用jquery

<script type="text/javascript">
(function($) {
	var $obj = $('#float_ad');
    var on_scroll = function() {
        var offset = $('#ad_box').offset();
        if (!offset) {
            return true
        }
        var _default = offset.top;
        if ($(window).scrollTop() > _default) {
            if ($.browser.msie && $.browser.version == '6.0') {
                $obj.css('position', 'absolute');
                $obj.css('top', $(window).scrollTop()-_default);
				$obj.css('right',0);
            } else {
                $obj.css('position', 'fixed');
                $obj.css('top', 10);
            }
        }else{
            $obj.css('position', 'static');
            $obj.css('top', _default)
        }
    };

   $(window).scroll(on_scroll);
})(jQuery);
</script>

这段代码，完美支持各个版本浏览器，尤其对IE6做了特殊处理，效果还是很理想的。大家可以到下面的网址去看效果

http://www.sayitout.net/