鼠标中键滚动事件案例：向下滚动弹出div层，向上滚动实现隐藏功能

html 部分

<div id="m-tb"> 

  <!--容器 -->

  <div class="box">家长专线：028-66009003、教员专线：028-66725630  /  &nbsp;  &nbsp; &nbsp;<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1928030088&site=qq&menu=yes" title="思问家教网-家长咨询" class="cs_online_qq"><font color="#FFFFFF">家长咨询：</font><img border="0" src="http://wpa.qq.com/pa?p=2:1928030088:51" alt="思问家教网-家长咨询" title="思问家教网-家长咨询" align="absmiddle" /> </a> &nbsp; &nbsp; &nbsp;<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1928040088&site=qq&menu=yes" title="思问家教网-教员咨询"  class="cs_online_qq" ><font color="#FFFFFF">教员咨询：</font><img border="0" src="http://wpa.qq.com/pa?p=2:1928040088:51" alt="思问家教网-教员咨询" title="思问家教网-教员咨询" align="absmiddle" /> </a></div></div>

  <!--/容器 --> 

</div>

<!--/A -->

<div id="kefu1">

    <div class="cs_close"><a href="javascript:;" onClick="$('#kefu1').fadeOut()"><span>关闭</span></a></div>

    <div class="cs_tel"></div>

    <div class="cs_tel_ct">

        <p style="margin-bottom: 0"><font size="3" face="微软雅黑" color="#000000">家长专线</font></p>

        <p style="margin-top: 0"><span class="cs_tel_num">028-6600 9003</span></p>

        <p style="margin-bottom: 0"><font size="3" face="微软雅黑" color="#000000">教员专线</font></p>

        <p style="margin-top: 0"><span class="cs_tel_num">028-6672 5630</span></p>

    </div>

    <div class="cs_spr"></div>

    <div class="cs_online"></div>

    <div class="cs_online_ct">

        <div class="cs_online_qq"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1928030088&site=qq&menu=yes" title="思问家教网-家长咨询">家长咨询<img border="0" src="http://wpa.qq.com/pa?p=2:1928030088:51" alt="思问家教网-家长咨询" title="思问家教网-家长咨询" align="absmiddle" /></a></div>

        <div class="cs_online_qq"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1928040088&site=qq&menu=yes" title="思问家教网-教员咨询" >教员咨询<img border="0" src="http://wpa.qq.com/pa?p=2:1928040088:51" alt="思问家教网-教员咨询" title="思问家教网-教员咨询" align="absmiddle" /></a></div>

 css 部分

<style>  *html #kefu1 { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
    margin-top: 50px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
    position: absolute;
    top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+50 : document.body.scrollTop +50);
}

#kefu1{position:fixed; right:0px; top:280px; z-index:10008; width: 132px; padding: 10px; background: #fff; border: 1px solid #ddd; box-shadow: 1px 1px 1px #d4d4d4; font-size: 12px;}
.cs_tel{height:25px; background: url(images/img.gif?v=1) no-repeat 0px 0px;}
.cs_tel_ct{color: #666; line-height: 150%;}
.cs_tel_num{color: #c00; font-size: 18px; font-family: Arial,Verdana; font-style: italic; font-weight: bold; display: block; padding: 5px 0px;}

.cs_online{height:30px; background: url(images/img.gif?v=1) no-repeat 0px -50px;}
.cs_online_qq{height: 25px;}
.cs_online_qq a:link, .cs_online_qq a:active, .cs_online_qq a:visited, .cs_online_qq a:hover{text-decoration: none; color: #666;}

.cs_qcode{padding: 10px 0px 0px 0px;}

.cs_free{height:32px; background: url(images/img.gif?v=1) no-repeat 0px -100px;}
.cs_free a{display: block; height: 32px;}
.cs_free a span{display: none;}

.cs_baidu{height:32px; background: url(images/img.gif?v=1) no-repeat 0px -200px;}
.cs_baidu a{display: block; height: 32px;}
.cs_baidu a span{display: none;}

.cs_spr{border-bottom: 1px dashed #c0c0c0; margin: 8px 0px;}
.cs_space{clear:both; overflow:hidden; height:8px;}
.cs_close{position: absolute; right: 5px; top: 5px; width: 12px; height: 12px; background: url(images/img.gif?v=1) no-repeat 0px -150px;}
.cs_close a{display: block; height: 10px;}
.cs_close a span{display: none;}

#m-tb{_display:none;width:100%; height:40px;line-height:40px;position:fixed; bottom:-40px;left:0;_bottom:0;_position:absolute; _bottom:expression(documentElement.scrollTop);-moz-box-shadow: 0 2px 3px rgba(0,0,0,.12);z-index:999999;border-bottom:1px solid #dfe3e6;background:url(images/bottom_bg.png)0px 0px repeat-x;}
#m-tb .box{width:930px;margin:0 auto;padding-left:50px;background:url(images/tel-logo.png)5px 1px no-repeat;position:relative;font-size:20px;color:#fff;font-weight:bold; font-family:Arial, 微软雅黑, 'Microsoft YaHei';}

#g-hd{width:980px;height:130px;margin:0 auto; text-align:center;}
#g-hd .m-logo{width:200px; height:130px; text-indent:-9999px; background:url(/2014/images/logo.png) center left no-repeat}
#g-hd .m-logo a{width:200px; height:130px;display:block}
#g-hd .m-box{width:780px; height:130px; background:url(/2014/images/tdcq.gif) center center no-repeat}

</style>

 js 部分

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(window).scroll(function() {
        var topToolbar = $("#m-tb");
        var headerH = $("#g-hd").outerHeight();
        var scrollTop = $(document).scrollTop();
        if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
            if( scrollTop >= headerH ){
                topToolbar.show();
            }else if( scrollTop < headerH ){
                topToolbar.hide();
            }
        }else{
            if( scrollTop >= headerH ){
                topToolbar.stop(false,true).animate({ 'bottom':0 });
            }else if( scrollTop < headerH ){
                topToolbar.stop(false,true).animate({ 'bottom':-40 });
            }
        };
    });
});
</script>

 具体效果可看 www.xtyjiajiao.com