右侧在线特服特效

一张背景图片，先用样式表固定好位置，显示页面中要显示的，先隐藏暂时不显示的
用if判断，要吗隐藏要吗显示，
html中给一个onclick 时间，点击后，谁显示，谁隐藏

<style>
    .oc_bg{background:url(images/onlineContact_bg.png) no-repeat}
    .btn{display:inline-block;text-decoration:none;cursor:pointer}
    #big_C{position:fixed;_position:absolute;width:100px;height:301px;right:1px;top:200px}
    #big_C .btn1{position:absolute;width:19px;height:19px;top:80px;right:0px;background-position:-176px -83px}
    #big_C .btn6{display:none;position:absolute;width:29px;height:85px;top:160px;left: -29px;background-position:-138px -84px}
    #big_C .btn6:hover{background-position:-101px -84px}
    #small_C{position:fixed;_position:absolute;width:28px;height:91px;right:1px;top:300px;background-position:-250px -174px}
    #small_C .btn1{display:none;position:absolute;width:28px;height:28px;left:0px;bottom:-28px;background-position:-207px -108px}
    #small_C .btn1:hover{background-position:-175px -108px}
    #small_C .stb{position:absolute;width:28px;height:91px;right:1px;top:0px}
</style>

<div style="background: green;  1000px; height: 1500px; margin: auto;">
    <div id="big_C" class="oc_bg">
    <a class="btn btn1 oc_bg" onclick="showSmall_C();" ></a> <!--右角小点，点击关闭-->
    <a class="btn btn6 oc_bg" onclick="$(window).scrollTop(0);"></a> <!--返回顶部-->
</div>
<div id="small_C" class="png oc_bg">
    <a class="btn btn1 oc_bg" onclick="$(window).scrollTop(0);"></a> <!--返回顶部变小-->
    <a class="stb btn" onclick="showBig_C();"></a>  <!--在线客服-->
</div>

<script type="text/javascript">
    $('#small_C').hide();
    $(window).scroll(function(){
        if($(this).scrollTop()!=0){
            $("#big_C .btn6").show();
            $("#small_C .btn1").show();
        }else{
            $("#big_C .btn6").hide();
            $("#small_C .btn1").hide();
        }
    });
    function showBig_C(){
        $('#small_C').hide(200);
        $('#big_C').show(200);
    }
    function showSmall_C(){
        $('#big_C').hide(200);
        $('#small_C').show(200);
    }
</script>

效果图：

png图片下载：