jQuery 实现的滚动浮动层

发布于：电脑网络 5,284 次践踏

不久前写过一篇《WordPress 向来自其他域的访客致欢迎词》，来自百度、Google、或者其他本域名以外的访客都会看到在右侧边栏上紧贴着滚动条的一浮动层，上面显示着欢迎词，不过那篇文章只是从实现的原理和方法上介绍了一下，对于我用的 jQuery 美化的方法都还没来的及介绍。今天就把这个方法也补上吧，就当是作个学习笔记。

为了方便大家，也不用从域外再来访问一下我的网站了，我特地做了一个 DEMO（点此查看），为了显示它的浮动效果，我就加了许多空白行，可以试试看到它是可以随滚动条而滚动的。方法如下：

1、HTML 部分

<div id="hellobaby">
    推荐您 <a href="http://feed.wange.im" target="_blank">点击这里</a> 订阅我的博客 o(∩_∩)o
    <div class="closebox">
        <a href="javascript:void(0)" onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a>
    </div>
</div>

2、载入 jQuery

亲测，jQuery 1.2X 的版本就足够用了。

3、执行的脚本

jQuery(document).ready(function($){
    $(window).scroll(function() {
        var bodyTop = 0;
        if (typeof window.pageYOffset != 'undefined') {
            bodyTop = window.pageYOffset
        } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
            bodyTop = document.documentElement.scrollTop
        } else if (typeof document.body != 'undefined') {
            bodyTop = document.body.scrollTop
        }
        $("#hellobaby").css("top", 250 + bodyTop)
    });
});

4、CSS 部分

#hellobaby {
background:#000;
color:#fff;
border:1px solid #B3B3B3;
font-size:14px;
right:0;
position:absolute;
top:250px;
opacity:.7;
filter:alpha(opacity=70);
padding:10px;
}

#hellobaby a {
color:orange;
text-decoration:none;
}

.closebox {
position:absolute;
right:5px;
top:0;
}

如果有更好的，或者代码更精简的方法，还请大家不吝赐教啊。