jq 樓層效果

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