JQUERY 简单实现滚动条下滑左侧菜单高亮

     <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>