[转载] 模仿淘宝列表页面的工具栏随屏幕滚动效果

转自 http://bbs.blueidea.com/thread-2997920-1-1.html

大家请看淘宝搜索商品，列表页面的效果

工具栏原先在默认位置，然后当滚动条往下滚动，滚动条的高度>=工具栏高度的时候，工具栏就浮动然后跟随滚动条
反之，等滚动条往上滚动，滚动条的高度<=工具栏高度的时候，浮动的工具栏就消失

漂浮滚动效果无闪烁，兼容IE 6 7 8 FF等浏览器

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿淘宝工具条</title>
<style type="text/css">
html,body{
    margin:0px;
    height:100%;
    overflow:hidden;
}
#autoscroll{
    height:100%;
    overflow:auto;
    width:100%;
    text-align:center;
}
.box{
    width:960px;
    height:100%;
    text-align:left;
    margin:auto;
}
.head{
    width:958px;
    height:200px;
    border:1px solid #eb6100;
    margin-top:10px;
    margin-bottom:10px;
}
.tool{
    width:958px;
    border:1px solid #eb6100;
    background:#FFF;
}
.toolabsolute{
    position:absolute;
    z-index:100;
    top:1px;
}
.list{
    width:958px;
    height:2400px;
    border:1px solid #eb6100;
    margin-top:10px;
    margin-bottom:10px;
}
</style>
<script src="http://www.huaian.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
</head>
<body>

<div id="autoscroll">
    <div class="box">
        <div class="head">
        网页头部<br />
        </div>

        <div class="tool" id="mytool">
        热门城市：北京西安上海深圳广州杭州成都南京重庆北京<br />
        省市首字母查找：A B C F G H J L N Q S T X Y Z
        </div>

        <div class="list">
        列表部分<br />
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    var mytooltop;
    var scrolltop;
    var toolleft;
    var cloned=false;
    toolleft=$(".box").get(0).offsetLeft;
    $("#mytool").clone(true).insertAfter("#autoscroll").css("left",toolleft+"px").addClass("toolabsolute");
    $(".toolabsolute").hide();

    $("#autoscroll").scroll(function(){
        mytooltop=$("#mytool").get(0).offsetTop;
        scrolltop=document.getElementById("autoscroll").scrollTop;
        if(scrolltop>=mytooltop && cloned==false){
            $(".toolabsolute").show();
            cloned=true;
        }
        if(!(scrolltop>=mytooltop) && cloned==true){
            $(".toolabsolute").hide();
            cloned=false;
        }
    })
})
</script>
</body>
</html>