[转载] 模仿淘宝列表页面的工具栏随屏幕滚动效果
转自 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>
<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>
