<div class="pro-item">
<h3>产品详情</h3>
<ul>
<li>· 外型尺寸</li>
<li>· 技术参数</li>
<li>· 资料下载</li>
</ul>
</div>
<div class="pro-cit">● 外型尺寸</div>
<div class="pdbox"></div>
<div class="pro-cit">● 技术参数</div>
<div class="pdbox"></div>
<div class="pro-cit">● 资料下载</div>
<div class="pdbox"></div>
<script>
$(function(){
$(".pro-item ul li").click(function(){
var top = $(".pro-cit").eq($(this).index()).offset().top;
$("body,html").animate({scrollTop:top-80},500);
$(this).addClass("on").siblings().removeClass("on");
})
var top2 = $(".pro-item").offset().top;
$(window).scroll(function(){
var top3 = $(this).scrollTop();
if(top3 >= top2-80){
$(".pro-item").addClass("on");
}else{
$(".pro-item").removeClass("on");
}
$(".pro-cit").each(function(index, element) {
if(top3>=$(this).offset().top-90){
$(".pro-item ul li").eq(index).addClass("on").siblings().removeClass("on");
}
});
})
})
</script>