jquery版悬浮模块demo

$(function(){
    if ('undefined' == typeof(document.body.style.maxHeight)) {
        /* 在线客服 */
        var $own;
        $(".online li").hover(function(){
            $own = $(this);
            $own.addClass("ie6hover");
        },function(){
            $own.removeClass("ie6hover");
        })
    }

    /* 定位在线客服 */
    var $cOntent= $(".wrapper-inner"), /* 中间主要内容 */
        $online = $(".online"), /* 在线客服 */
        $returnHome = $(".returnHome"), /* 返回首页 */
        $returnTop = $("#returnTop"), /* 返回顶部 */
        contentWidth = $content.width(),
        onlineWidth = $online.width(),
        returnHomeWidth = $returnHome.width(),
        wWidth, /* window的宽度 */
        wHeight, /* window的高度 */
        contentLeft, /* $content距离左边的距离 */
        contentTop, /* $content距离顶部的距离 */
        dScrollTop, /* 滚动条距离顶部位置 */
        crisisHeight, /* 临界高度，就是滚动条滚动到哪个位置就开始执行 */
        onlineConnectHeight = $(".slide").height(), /* online中连接header和在线客服中间的距离 */
        returnHomeConnectHeight = $(".header").height(), /* online中连接header和在线客服中间的距离 */
        targetValue = 960, /* 临界大小，也就是当window的宽度为960时怎么样怎么样，也可以设置1200，看需求 */
        Hang = $.extend({
            defineReturnTop: function(){ /* 返回到顶部 */
                if(dScrollTop == 0){
                    $returnTop.fadeOut(200);
                }else if(dScrollTop > 0){
                    $returnTop.fadeIn();
                }
            },
            defineSize: function(){ /* 初始化 */
                wWidth = $(window).width(),
                    wHeight = $(window).height(),
                    dScrollTop = $(document).scrollTop(),
                    contentLeft = $content.offset().left, /* wrapper-inner距离左边距离 */
                    contentTop = $content.offset().top, /* wrapper-inner距离顶部距离 */
                    crisisHeight = contentTop + onlineConnectHeight; /* online距离顶部的距离 */

                /* 悬浮对象 */
                var hangObj = {
                    online: {
                        target: $online, /* 目标标签 */
                        crisisHeight: crisisHeight, /* 临界高度值 */
                        left: "", /* absolute的left值 */
                        leftFixed: "", /* fixed的left值 */
                        top: crisisHeight, /* absolute的top值 */
                        topFixed: "20px", /* fixed的top值 */
                        topIe6: dScrollTop /* ie6下面top值 */
                    },
                    returnHome: {
                        target: $returnHome,
                        crisisHeight: contentTop,
                        left: "",
                        leftFixed: "",
                        top: contentTop,
                        topFixed: "10px",
                        topIe6: dScrollTop
                    }
                }
                Hang.defineReturnTop(); /* 返回顶部事件调用 */
                if(wWidth /* 当window的宽度小于960时做以下操作 */
                    hangObj.online.left = wWidth - onlineWidth;
                    hangObj.online.leftFixed = wWidth - onlineWidth;
                    hangObj.returnHome.left = 0;
                    hangObj.returnHome.leftFixed = 0;
                    Hang.defineHangCrisis(hangObj.online);
                    Hang.defineHangCrisis(hangObj.returnHome);
                }else if(wWidth >= targetValue){
                    hangObj.online.left = contentWidth + contentLeft;
                    hangObj.online.leftFixed = contentWidth + contentLeft;
                    hangObj.returnHome.left = contentLeft - returnHomeWidth;
                    hangObj.returnHome.leftFixed = contentLeft - returnHomeWidth;
                    Hang.defineHangCrisis(hangObj.online);
                    Hang.defineHangCrisis(hangObj.returnHome);
                }
            },
            defineHangCrisis: function(obj){ /* 定义悬浮临界事件 */
                /* 除ie6以外的浏览器 */
                if ('undefined' != typeof(document.body.style.maxHeight)) {
                    /* 当滚动条高度小于online以上的高度（也就是还未碰到临界值），让online以absolute的形式显示，宽度是相对于body定位 */
                    if(obj.crisisHeight > dScrollTop){
                        obj.target.removeClass("onlineFixed");
                        obj.target.css({left: obj.left, top: obj.top});
                    }else{
                        /* 当滚动条滚动到online处时，online就开始以fixed的形式持续显示,宽度是相对于body定位 */
                        obj.target.addClass("onlineFixed");
                        obj.target.css({left: obj.leftFixed,top: obj.topFixed});
                    }
                }else{/* 针对ie6 */
                    if(obj.crisisHeight > dScrollTop){
                        obj.target.css({left: obj.left, top: obj.top});
                    }else{
                        obj.target.css({left: obj.left, top: obj.topIe6});
                    }
                }
            }
        },function(){});

    /*----------------- 以下为触发事件----------------------- */
    Hang.defineSize(); /* 初始化大小 */
    $(window).resize(function(){
        Hang.defineSize();
    })

    $(window).scroll(function(){
        Hang.defineSize();
    })

    /* 返回顶部 */
    $returnTop.click(function(){
        $(document).scrollTop(0);
    })
})