前几天看到美丽说那个导航，觉得不错，所以也琢磨着修改一下本站右边的效果。
首先简单介绍一下，这些代码的效果，
当滚动条滚动到.scrolls处，就让这个层不在跟着滚动
当滚动条滚到.scrolls之上，这个层就变回原来的排版。
代码附上：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>跟着一起滚动吧</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body {
color: white;
font-family: Helvetica, Arial, sans-serif;
}
.d{
background:#ccc;
padding:30px 20px;
border:1px solid #c3c3c3;
color:#333;
width:200px;
border-radius:5px;
background: white;
-webkit-box-shadow: 2px 2px 10px #E7E5E6;
-moz-box-shadow: 2px 2px 10px #e7e5e6;
box-shadow: 2px 2px 10px #E7E5E6;
overflow: hidden;
margin-left:40px;
}
.fixed{
width:200px;
position:fixed;
background:#256472;
color:#333;
border-radius:5px;
background: white;
-webkit-box-shadow: 2px 2px 10px #E7E5E6;
-moz-box-shadow: 2px 2px 10px #e7e5e6;
box-shadow: 2px 2px 10px #E7E5E6;
overflow: hidden;
}
.h500{height:500px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var m_arr = Array();
$(".scrolls").each(function(){m_arr.push($(this).position().top);});
$(document).scroll(function() {
var top=10;
var offset = $(this).scrollTop();
$(".scrolls").each(function(index,doma){
var div_offset =$(this).position();
if(m_arr[index] <= offset+top){
$(this).addClass("fixed");
$(this).stop().animate({ top: top}, 1000 );
top=top+$(this).outerHeight();
}else{
$(this).css("top",0);
$(this).removeClass("fixed");
}
});
});
});
</script>
</head>
<body>
<div class="h500"> </div>
<div class="d">滚到一定程度 就不滚啦1</div>
<div class="d scrolls">滚到一定程度 就不滚啦2</div>
<div class="d">滚到一定程度 就不滚啦3</div>
<div class="d scrolls">滚到一定程度 就不滚啦4</div>
<div class="d">滚到一定程度 就不滚啦5</div>
<div class="d scrolls">滚到一定程度 就不滚啦6</div>
<div class="h500"> </div>
<div class="h500"> </div>
</body>
</html>