<style> *{ list-style:none; padding: 0; margin: 0; } #center{ position: fixed; top: 200px; left: 100px; cursor: pointer; } #right-img{ width: 50%; margin-left: 300px; } .right-img-img{ width: 100%; height: 500px; border: 1px solid #ccc; } .active{ color: red; } </style>
<div id="center"> <lu> <li> Expose</li> <li> jsPDF</li> <li> BaySentry</li> <li> vtop</li> </lu> </div> <div id="right-img" style="padding-bottom: 100px;"> <div class="right-img-img"> Expose </div> <div class="right-img-img"> jsPDF </div> <div class="right-img-img"> BaySentry </div> <div class="right-img-img"> vtop </div> </div>
<script> $(function(){ $('li').eq(0).addClass('active') // 点击出现楼层效果; // scrollTop 是滚动条距离顶部的距离; $('li').click(function(){ var index = $(this).index(); $(this).addClass('active').siblings().removeClass('active') var divTop = $('.right-img-img').eq(index).offset().top; $('html, body').animate({ scrollTop: parseInt(divTop)}, 500) }) // 滚动条滚动事件; $(window).scroll(function(){ var sm = $(document).scrollTop(); var index = Math.floor(sm / 500); console.log(index) $("li").eq(index).addClass("active").siblings().removeClass("active"); }) }) </script>