jquery版懸浮模塊demo

　　在做在線客服時，代碼就是按照該模塊命名。現在，我要添加一個返回主頁的功能，我覺得再復制一遍之前的代碼，那個量有點多，如果我再添加一個功能，那個量會很多……現在我用創建對象字面量的方式來創建（其實我還想做的更簡單一點，將代碼封裝起來，直接用一個方法調用。但是現在還沒想到很好的封裝方式，就先把現在的這種方式記錄下來）。

　　一、演示圖

　　初始狀態：

　　　　

　　滑動狀態（超過臨界值）：

　

　　二、html代碼

<div class="container">
    <!-- start header -->
    <div class="header">
        <div class="header-inner"></div>
    </div>
    <!-- end header -->

    <!-- start wrapper -->
    <div class="wrapper">
        <div class="wrapper-inner">
            <!-- 返回按鈕 -->
            <div class="returnHome"><a href="/demonstrate.htm"><img src="images/ico_return.png"/></a></div>

            <!-- 在線客服 -->
            <div class="online onlineBlue">
                <ul>
                    <li class="item1">
                        <a class="help" href="javascript:void(0);"></a>
                        <div class="on-detail">
                            <h3><i></i>客服電話</h3>
                            <p>更快更貼心的服務熱線</p>
                            <p>服務時間：周一至六9:00-18:00</p>
                            <p class="c-orange">000-0000-0000</p>
                        </div>
                    </li>
                    <li class="item2">
                        <a class="help" href="javascript:void(0);"></a>
                        <div class="on-detail">
                            <h3><i></i>QQ在線客服</h3>
                            <p>為您實時解決問題</p>
                            <p>服務時間：周一至六9:00-18:00</p>
                            <a href="javascript:void(0);"><img border="0" src="http://imgs1.mxthcdn.com/b/I16i2730m062365593198_lZXkeT.jpg" alt="客服，歡迎您來咨詢" title="客服，歡迎您來咨詢"></a>
                        </div>
                    </li>
                    <li class="itemlast">
                        <a class="help" style="display: none;" id="returnTop" title="返回頂部" href="javascript:void(0);"></a>
                    </li>
                </ul>
            </div>

            <div class="slide"></div>

        </div>
    </div>
    <!-- end wrapper -->

</div>

　　三、js代碼

$(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 < targetValue){/* 當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);
    })
})

 　　分析：

　　因為代碼里注釋的很清楚，所以我這里只做一個簡單介紹（關於在線客服）。

　　先說一下我的設計思路，我先考慮它會有幾種狀態，不改變窗口大小和改變窗口大小的區別，滾動滑動條和不滾動滑動條的區別。

　　（1）不改變窗口大小並且不滾動滾動條（或者滾動條未超過臨界值），是用position:absolute定位在一個固定位置（相對於body），位置定義看自己需求，想要在左邊就左邊右邊就右邊。我這里固定在wrapper-inner中間內容的左側，slide的底部那個位置（crisisHeight臨界高度就是根據這個得到的）。所以left值為wrapper-inner左邊的距離加上wrapper-inner的寬度，即contentWidth + contentLeft。高度為header的高度加上slide的高度，即contentTop + onlineConnectHeight。

　　（2）不改變窗口大小並且滾動滾動條（滾動條滾動超過臨界值），是用position:fixed定位在一個固定位置（不包括ie6，因為它不支持fixed，下面會有專門講解），fixed相對於body的（窗口左上角），left值為wrapper-inner左邊的距離加上wrapper-inner的寬度，所以為contentWidth + contentLeft。高度為0（自定義的），即一直在窗口頂部。

　　（3）改變窗口大小並且不滾動滾動條（或者滾動條未超過臨界值），這里就是改變一下left值，把位置放在window的右邊，所以left值為window的寬度減去left值自身的寬度，即wWidth - onlineWidth。top值不變。

　　（4）改變窗口大小並且滾動滾動條（滾動條滾動超過臨界值），這里就是改變一下left值，把位置放在window的右邊，所以left值為window的寬度減去left值自身的寬度，即wWidth - onlineWidth。top值不變。

　　（5）ie6下面定義就只有一點不一樣，沒有fixed這個屬性。所有top值不一樣，它的top值為滾動滾動的高度，即dScrollTop。

　　hangObj為懸浮對象字面量，可以根據需求添加多個模塊，只需在這邊添加屬性，再調用方法即可，降低了代碼重復率（我后期還會繼續精簡代碼量）。

　　希望這些能給需要的人一丁點幫助，如果有哪里講的不好或者不對的地方往指正，謝謝~點擊下載demo