项目需要，我自己写了一个头像跟随内容移动的功能，同时也有展开更多的功能；开始实现以后，特别高兴。可后来才发现有BUG，特大一BUG。展开更多功能很漂亮，滑动功能也很漂亮。
不多说，看代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no"/>
<!--<link rel="stylesheet" type="text/css" href="../css/public.css" />-->
<style type="text/css">
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout:none;}
body, div, p, ul, textarea, form, input, h1, h2, h3, h4, h5, dl, dt, dd, img, section, article, aside, header, footer, nav, dialog, figure, hgroup { margin: 0; padding: 0; }
html, body { height: 100% }
body { font-family: Helvetica; -webkit-text-size-adjust: none; background: #fafafa; font-size: 14px; color: #555; }
h1, h2, h3, h4, h5 { font-weight: normal; font-size: 14px; }
em { font-style: normal; }
ul, ol, li { list-style: none }
img { border: 0 none }
a { text-decoration: none; color: #555; }
.clearfix { zoom: 1 }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/*清浮动*/
.fixed{ position:fixed; top:0; left:0; z-index: 10000;}
.mt10 { margin-top: 10px; }
.p10 { padding: 10px }
.p15 { padding: 15px }
.blue { color: #B26602!important; }
.bgcolor { background: #f0f0f0 }
.bb { border-bottom: 1px solid #e5e5e5; }
.mt20 { margin-top: 20px; }
.pB20{padding-bottom:20px;}
.fl{float:left;}
.fr{float:right;}
.bg-dadada{background-color:#dadada;}
.bg-dadada .p10{padding:8px; background-color: #efefef;}
.glance{padding:0 0 8px 100px; position:relative;}
.glance-con{ background-color:#f3f3f3; border:1px solid #d0d0d0; -webkit-border-radius:5px;/*-webkit-border-top-left-radius:0px;*/}
.glance-con-wrap{-webkit-border-radius:5px;-webkit-border-top-left-radius:0px; padding: 20px 5px 5px; min-height: 40px;}
.glance-con-wrap a{display: inline-block; padding: 0 14px; text-decoration: none; background: url(../u/s/i/tnd.gif) no-repeat right -5px; margin-bottom: 15px;}
.glance-con-wrap a.more_books{background: url(../u/s/i/tnd.gif) no-repeat right 7px;}
.glance-tab{position:absolute; left:0; top:0; bottom: 0; background: url(../u/s/i/lv_bg.gif) repeat-y 78px;}
.glance-tab-wrap{padding:8px; padding-right: 50px; font-size:12.6px; background: url(../u/s/i/tab_bg.png) no-repeat 50px 22px; position: relative;}
.glance-tab-wrap img{width: 58px; height: 58px;-webkit-border-radius: 29px;}
.glance-tab-wrap p{margin-top:5px; text-align: center;}
.book-item {height: 165px; overflow: hidden;}
.book-item li{float:left;width:33.33%;margin-bottom:12px}
.book-item li .book-cover{position:relative;width:55px;height:72px;margin:0 auto}
.book-item li .book-cover img{margin:2px;background:url(../u/s/i/ireader.png) no-repeat center center;-webkit-background-size:32px 8px;width:51px;height:68px}
.book-item li .shadow{position:absolute;background:url(../u/s/i/book_cover.png) no-repeat;-webkit-background-size:55px 72px;width:55px;height:72px;display:block;top:0;left:0}
</style>
<title>附近的人都在看什么</title>
<script type="text/javascript">
function showBooks(obj){
var className = obj.getAttribute("class");
var boxes = document.getElementsByClassName("glance-con-wrap");
if(className == undefined || className == ""){
obj.setAttribute("class","more_books");
obj.innerHTML = "收起";
obj.previousSibling.previousSibling.style.height = "auto";
} else if(className == "more_books") {
obj.setAttribute("class","");
obj.innerHTML = "更多显示";
obj.previousSibling.previousSibling.style.height = 165 + "px";
}
}
</script>
</head>
<body class="bg-dadada">
<div class="p10 ">
<div class="glance">
<div class="glance-tab">
<div class="glance-tab-wrap">
<img src="../u/s/i/user-head3.png" width="36" height="36">
<p>0.6Km</p>
</div>
</div>
<div class="glance-con">
<div class="glance-con-wrap">
<ul class="book-item clearfix">
<li><div class="book-cover" onClick="get_bookinfo(10023905)"><img width="51" height="68" src="/i/l/jpg/7296/10023905.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10013667)"><img width="51" height="68" src="../i/l/jpg/7296/10013667.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li>
</ul>
<a onClick="showBooks(this);" href="javascript:void(0)">显示更多</a>
</div>
</div>
</div>
<div class="glance">
<div class="glance-tab">
<div class="glance-tab-wrap">
<img src="../u/s/i/user-head2.png" width="36" height="36">
<p>0.9Km</p>
</div>
</div>
<div class="glance-con">
<div class="glance-con-wrap">
<ul class="book-item clearfix">
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
</ul>
<a onClick="showBooks(this);" href="javascript:void(0)">更多显示</a>
</div>
</div>
</div>
<div class="glance">
<div class="glance-tab">
<div class="glance-tab-wrap">
<img src="../u/s/i/user-head1.png" width="36" height="36">
<p>0.3Km</p>
</div>
</div>
<div class="glance-con">
<div class="glance-con-wrap">
<ul class="book-item clearfix">
<li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10036235)"><img width="51" height="68" src="../i/l/jpg/7296/10036235.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10005575)"><img width="51" height="68" src="../i/l/jpg/7296/10005575.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
</ul>
</div>
</div>
</div>
<div class="glance">
<div class="glance-tab">
<div class="glance-tab-wrap">
<img src="../u/s/i/user-head1.png" width="36" height="36">
<p>0.3Km</p>
</div>
</div>
<div class="glance-con">
<div class="glance-con-wrap">
<ul class="book-item clearfix">
<li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018823)"><img width="51" height="68" src="../i/l/jpg/7296/10018823.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10031251)"><img width="51" height="68" src="../i/l/jpg/7296/10031251.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10047862)"><img width="51" height="68" src="../i/l/jpg/7296/10047862.jpg"><span class="shadow"></span></div></li>
</ul>
</div>
</div>
</div>
<div class="glance">
<div class="glance-tab">
<div class="glance-tab-wrap">
<img src="../u/s/i/user-head3.png" width="36" height="36">
<p>0.1Km</p>
</div>
</div>
<div class="glance-con">
<div class="glance-con-wrap">
<ul class="book-item clearfix">
<li><div class="book-cover" onClick="get_bookinfo(1013532)"><img width="51" height="68" src="../i/l/jpg/7296/1013532.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10013667)"><img width="51" height="68" src="../i/l/jpg/7296/10013667.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10018823)"><img width="51" height="68" src="../i/l/jpg/7296/10018823.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li>
<li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li>
</ul>
</div>
</div>
</div>
</div>
<div id="top-box" style="border: 1px solid #333; padding: 10px; background-color: #ccc; position: fixed; top: 0; left: 0;"></div>
<script type="text/javascript">
function get_bookinfo(bid){
var json = '{"Action":"lbsShowBook", "Url": "../u/p/lbs.php?action=get_bookinfo_json&usr=i13701509&rgt=7&p1=&p2=999941&p3=6000&p4=501603&p5=14&p6=&p7=&p9=0&p15=&p16=&p19=&pk=&bid='+bid+'"}';
window.ZhangYueJS.do_command(json);
}
window.onscroll = function(event){ //滚动条移动的时候执行以下函数
var sTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离页面项端的高度
var boxes = document.getElementsByClassName("glance"); //获取所有class为“glance-con”的模块
//document.getElementById("top-box").firstChild;
var boxLens = boxes.length; //计算模块个数
var iHeight = 0, n=0; //iHeight存放模块高度和,n用来存放当前屏内第一个模块的序数
var tabH = 0; //存放头像要移动的高度
var boxH = new Array(); //这个数组用来存放每个"glance-con"所在模块的高度
var sumBoxs = new Array(); //用来存放前i个模块的高度和
for(var i = 0; i < boxLens; i++ ) {
boxH[i] = boxes[i].offsetHeight; //获取每个模块的高度
iHeight += boxH[i]; //高度求和
sumBoxs[i] = iHeight; //i=0时，sumBoxs[0] = boxH[0]，i=1时，sumBoxs[0] = boxH[0]+boxH[1]以次类推
if(i == 0 && sTop < sumBoxs[i]){
n = i
} else if(i > 0 && sTop > sumBoxs[i-1] && sTop < sumBoxs[i]){
n = i;
}
}
if(n == 0){
tabH = sTop;
} else {
tabH = sTop - sumBoxs[n-1];
}
if(tabH >= boxH[n] - 80){
tabH = boxH[n] - 80;
}
var boxTab_p = boxes[n].childNodes[1];
var boxTab = boxTab_p.childNodes[1];
boxTab.style.top = tabH + "px";
}
</script>
</body>
</html>
试下看，是不是很漂亮；多试几下，是不是有问题？
问题1：收起的时候内容收起来了，头像没有跟着收起来；
问题2：当展开内容特别多的时候，一收起，不知道当前看到哪个用户了
纠其原因，每一个人头像都是跟着滚动条动的；滚动条每次动的时候都会计算下人头所在模块的高度，头像就可以在这个高度里动，可是收起的时候没有计算模块高度，头像就认为它还在收起前的那个模块里呢，所以移动到下面的头像不会自己动回到自己的模块位置中来...所以，脱离组织了...就出BUG了。
修改方案：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no"/> <!--<link rel="stylesheet" type="text/css" href="../css/public.css" />--> <style type="text/css"> * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout:none;} body, div, p, ul, textarea, form, input, h1, h2, h3, h4, h5, dl, dt, dd, img, section, article, aside, header, footer, nav, dialog, figure, hgroup { margin: 0; padding: 0; } html, body { height: 100% } body { font-family: Helvetica; -webkit-text-size-adjust: none; background: #fafafa; font-size: 14px; color: #555; } h1, h2, h3, h4, h5 { font-weight: normal; font-size: 14px; } em { font-style: normal; } ul, ol, li { list-style: none } img { border: 0 none } a { text-decoration: none; color: #555; } .clearfix { zoom: 1 } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/*清浮动*/ .fixed{ position:fixed; top:0; left:0; z-index: 10000;} .mt10 { margin-top: 10px; } .p10 { padding: 10px } .p15 { padding: 15px } .blue { color: #B26602!important; } .bgcolor { background: #f0f0f0 } .bb { border-bottom: 1px solid #e5e5e5; } .mt20 { margin-top: 20px; } .pB20{padding-bottom:20px;} .fl{float:left;} .fr{float:right;} .bg-dadada{background-color:#dadada;} .bg-dadada .p10{padding:8px; background-color: #efefef;} .glance{padding:0 0 8px 100px; position:relative;} .glance-con{ background-color:#f3f3f3; border:1px solid #d0d0d0; -webkit-border-radius:5px;/*-webkit-border-top-left-radius:0px;*/} .glance-con-wrap{-webkit-border-radius:5px;-webkit-border-top-left-radius:0px; padding: 20px 5px 5px; min-height: 40px;} .glance-con-wrap a{display: inline-block; padding: 0 14px; text-decoration: none; background: url(../u/s/i/tnd.gif) no-repeat right -5px; margin-bottom: 15px;} .glance-con-wrap a.more_books{background: url(../u/s/i/tnd.gif) no-repeat right 7px;} .glance-tab{position:absolute; left:0; top:0; bottom: 0; background: url(../u/s/i/lv_bg.gif) repeat-y 78px;} .glance-tab-wrap{padding:8px; padding-right: 50px; font-size:12.6px; background: url(../u/s/i/tab_bg.png) no-repeat 50px 22px; position: relative;} .glance-tab-wrap img{width: 58px; height: 58px;-webkit-border-radius: 29px;} .glance-tab-wrap p{margin-top:5px; text-align: center;} .book-item {height: 165px; overflow: hidden;} .book-item li{float:left;width:33.33%;margin-bottom:12px} .book-item li .book-cover{position:relative;width:55px;height:72px;margin:0 auto} .book-item li .book-cover img{margin:2px;background:url(../u/s/i/ireader.png) no-repeat center center;-webkit-background-size:32px 8px;width:51px;height:68px} .book-item li .shadow{position:absolute;background:url(../u/s/i/book_cover.png) no-repeat;-webkit-background-size:55px 72px;width:55px;height:72px;display:block;top:0;left:0} </style> <title>附近的人都在看什么</title> <script type="text/javascript"> function showBooks(obj){ var className = obj.getAttribute("class"); var boxes = document.getElementsByClassName("glance-con-wrap"); if(className == undefined || className == ""){ obj.setAttribute("class","more_books"); obj.innerHTML = "收起"; obj.previousSibling.previousSibling.style.height = "auto"; } else if(className == "more_books") { obj.setAttribute("class",""); obj.innerHTML = "更多显示"; obj.previousSibling.previousSibling.style.height = 165 + "px"; ////////////////////////////////////////////////////////这里的修改收起bug的代码 var parentObj = obj.parentNode.parentNode; var glanceBox = document.getElementsByClassName("glance"); var n = getIndex(parentObj.parentNode, glanceBox); var PHeight = 0; for(var i = 0; i < n; i++){ PHeight += glanceBox[i].offsetHeight; } window.scrollTo(0,PHeight); var parentHeight = parentObj.offsetHeight; parentObj.previousSibling.previousSibling.childNodes[1].style.top = 0 +"px"; } } function getIndex(ele, arr){ //arr这个参数是那一组元素 ele = ele?ele:document.getElementById(ele);//传进来的参数ele，可以是一个DOM对象，也可以是一个ID名（字符串) /* if (ele && typeof ele == "string") document.getElementById(ele); */ if (ele && arr && arr.length)//三个逻辑与运算，判断：1、ele这个元素要存在。2、arr这一组元素要存在。arr不能是个空数组 { for (var i = 0; i < arr.length; i++) { if (ele == arr[i])//如果这个原素和数组里的某个原素相等 return i;//则把索引号返回并且结束 } } return -1;//返回-1表示没有匹配的元素 }; /////////////////////////////////////////////////////////////////////修改结束 </script> </head> <body class="bg-dadada"> <div class="p10 "> <div class="glance"> <div class="glance-tab"> <div class="glance-tab-wrap"> <img src="../u/s/i/user-head3.png" width="36" height="36"> <p>0.6Km</p> </div> </div> <div class="glance-con"> <div class="glance-con-wrap"> <ul class="book-item clearfix"> <li><div class="book-cover" onClick="get_bookinfo(10023905)"><img width="51" height="68" src="../i/l/jpg/7296/10023905.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10013667)"><img width="51" height="68" src="../i/l/jpg/7296/10013667.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li><li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li> </ul> <a onClick="showBooks(this);" href="javascript:void(0)">显示更多</a> </div> </div> </div> <div class="glance"> <div class="glance-tab"> <div class="glance-tab-wrap"> <img src="../u/s/i/user-head2.png" width="36" height="36"> <p>0.9Km</p> </div> </div> <div class="glance-con"> <div class="glance-con-wrap"> <ul class="book-item clearfix"> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(1018130)"><img width="51" height="68" src="../i/l/jpg/7296/1018130.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> </ul> <a onClick="showBooks(this);" href="javascript:void(0)">更多显示</a> </div> </div> </div> <div class="glance"> <div class="glance-tab"> <div class="glance-tab-wrap"> <img src="../u/s/i/user-head1.png" width="36" height="36"> <p>0.3Km</p> </div> </div> <div class="glance-con"> <div class="glance-con-wrap"> <ul class="book-item clearfix"> <li><div class="book-cover" onClick="get_bookinfo(10018742)"><img width="51" height="68" src="../i/l/jpg/7296/10018742.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10036235)"><img width="51" height="68" src="../i/l/jpg/7296/10036235.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10005575)"><img width="51" height="68" src="../i/l/jpg/7296/10005575.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> </ul> </div> </div> </div> <div class="glance"> <div class="glance-tab"> <div class="glance-tab-wrap"> <img src="../u/s/i/user-head1.png" width="36" height="36"> <p>0.3Km</p> </div> </div> <div class="glance-con"> <div class="glance-con-wrap"> <ul class="book-item clearfix"> <li><div class="book-cover" onClick="get_bookinfo(1041307)"><img width="51" height="68" src="../i/l/jpg/7296/1041307.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10030993)"><img width="51" height="68" src="../i/l/jpg/7296/10030993.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018823)"><img width="51" height="68" src="../i/l/jpg/7296/10018823.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10031251)"><img width="51" height="68" src="../i/l/jpg/7296/10031251.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10047862)"><img width="51" height="68" src="../i/l/jpg/7296/10047862.jpg"><span class="shadow"></span></div></li> </ul> </div> </div> </div> <div class="glance"> <div class="glance-tab"> <div class="glance-tab-wrap"> <img src="../u/s/i/user-head3.png" width="36" height="36"> <p>0.1Km</p> </div> </div> <div class="glance-con"> <div class="glance-con-wrap"> <ul class="book-item clearfix"> <li><div class="book-cover" onClick="get_bookinfo(1013532)"><img width="51" height="68" src="../i/l/jpg/7296/1013532.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10013667)"><img width="51" height="68" src="../i/l/jpg/7296/10013667.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10018823)"><img width="51" height="68" src="../i/l/jpg/7296/10018823.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10024749)"><img width="51" height="68" src="../i/l/jpg/7296/10024749.jpg"><span class="shadow"></span></div></li> <li><div class="book-cover" onClick="get_bookinfo(10037269)"><img width="51" height="68" src="../i/l/jpg/7296/10037269.jpg"><span class="shadow"></span></div></li> </ul> </div> </div> </div> </div> <div id="top-box" style="border: 1px solid #333; padding: 10px; background-color: #ccc; position: fixed; top: 0; left: 0;"></div> <script type="text/javascript"> function get_bookinfo(bid){ var json = '{"Action":"lbsShowBook", "Url": "../u/p/lbs.php?action=get_bookinfo_json&usr=i13701509&rgt=7&p1=&p2=999941&p3=6000&p4=501603&p5=14&p6=&p7=&p9=0&p15=&p16=&p19=&pk=&bid='+bid+'"}'; window.ZhangYueJS.do_command(json); } window.onscroll = function(event){ //滚动条移动的时候执行以下函数 var sTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离页面项端的高度 var boxes = document.getElementsByClassName("glance"); //获取所有class为“glance-con”的模块 //document.getElementById("top-box").firstChild; var boxLens = boxes.length; //计算模块个数 var iHeight = 0, n=0; //iHeight存放模块高度和,n用来存放当前屏内第一个模块的序数 var tabH = 0; //存放头像要移动的高度 var boxH = new Array(); //这个数组用来存放每个"glance-con"所在模块的高度 var sumBoxs = new Array(); //用来存放前i个模块的高度和 for(var i = 0; i < boxLens; i++ ) { boxH[i] = boxes[i].offsetHeight; //获取每个模块的高度 iHeight += boxH[i]; //高度求和 sumBoxs[i] = iHeight; //i=0时，sumBoxs[0] = boxH[0]，i=1时，sumBoxs[0] = boxH[0]+boxH[1]以次类推 if(i == 0 && sTop < sumBoxs[i]){ n = i } else if(i > 0 && sTop > sumBoxs[i-1] && sTop < sumBoxs[i]){ n = i; } } if(n == 0){ tabH = sTop; } else { tabH = sTop - sumBoxs[n-1]; } if(tabH >= boxH[n] - 80){ tabH = boxH[n] - 80; } var boxTab_p = boxes[n].childNodes[1]; var boxTab = boxTab_p.childNodes[1]; boxTab.style.top = tabH + "px"; } </script> </body> </html>
现在是不是比较好些了...
但是我知道我的代码比较初级，欢迎大家批评指导。多多提意见建议哈～
