<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.add{
color:#f90;
}
*{
margin:0;
padding:0;
}
h3{
margin:0;
padding:20px 0;
}
p{
background: #888;
}
.box_cont{
background: red;
}
</style>
</head>
<body>
<div class="container" style="position: relative">
<div class="box1" style="width:80%;display: inline-block;">
<h3>标题</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题1</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题2</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题3</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题4</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题5</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题6</h3>
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
<h3>标题7</h3>
<div class="box_cont">
<div class="box_cont">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
</div>
</div>
</div>
<div class="box2" style="width:18%;display: inline-block;position: fixed;top:200px;">
<h3 class="add">标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<h3>标题5</h3>
<h3>标题6</h3>
<h3>标题7</h3>
</div>
</div>
</body>
</html>
<script>
var lastIndex=0;
var temp=document.querySelectorAll('.box1 h3');
var temp2=document.querySelectorAll('.box2 h3');
var temp3=document.querySelectorAll('.box_cont');
window.onscroll=function (e){
if (e.target.body.scrollTop >= lastIndex) {
lastIndex = e.target.body.scrollTop;
for(var i=0;i<temp.length;i++){
if (e.target.body.scrollTop >= temp[i].offsetTop && e.target.body.scrollTop <= temp[i].offsetTop+temp[i].offsetHeight+temp3[i].offsetHeight) {
temp2[i].className='add';
//this.refs['tool_3d_shock_mermaidt01_animation'].className="tool_3d_shock_img_tit tool_3d_shock_mermaidt_animation_a";
// this.refs['tool_huyan_use_animation_b'].className="tool_huyan_use_box_cont_two_son3 tool_huyan_use_animation_b";
// this.refs['animation_b'].className=this.refs['animation_b']+"_active";
}else{
temp2[i].className='';
}
}
}else{
lastIndex = e.target.body.scrollTop;
for(var i=0;i<temp.length;i++){
if (e.target.body.scrollTop >= temp[i].offsetTop && e.target.body.scrollTop <= temp[i].offsetTop+temp3[i].offsetHeight+temp[i].offsetHeight) {
temp2[i].className='add';
//this.refs['tool_3d_shock_mermaidt01_animation'].className="tool_3d_shock_img_tit tool_3d_shock_mermaidt_animation_a";
// this.refs['tool_huyan_use_animation_b'].className="tool_huyan_use_box_cont_two_son3 tool_huyan_use_animation_b";
// this.refs['animation_b'].className=this.refs['animation_b']+"_active";
}else{
temp2[i].className='';
}
}
}
//lastIndex = e.target.body.scrollTop;
};
</script>
网友评论