滚动div内容，变化导航栏状态，点击导航栏切换div内容

点击导航栏切换div内容用到的是“锚点”，不清楚锚点的可以去这里看看https://www.cnblogs.com/zhangxiaopeng/p/6255750.html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
        *{padding:0;margin:0;}
	.warp{position:relative;height:600px;width:300px;overflow:hidden}
	.menu_nav{position:relative;float:left;overflow:auto;width:40%;height:100%;}
	.menu_con{position:relative;float:right;overflow:auto;height:100%;}
	.mc_shop{height:200px;width:100%;}
	.onn{background:red}
	ul{width:100%;}
	li{list-style-type:none;height:80px;width:100%;}
</style>
<div class="warp">
	<div class="menu_nav">
		<ul>
		 <li class="onn"><a href="#1">1</li>
		 <li><a href="#2">2</li>
		 <li><a href="#3">3</li>
		 <li><a href="#4">4</li>
		 <li><a href="#5">5</li>
		 <li><a href="#6">6</li>
		 <li><a href="#7">7</li>
		</ul>
	</div>
	<div class="menu_con">
		<div class="mc_shop">
			<p class="mcs_top"><a name="1"></a>我是1</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="2"></a>我是2</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="3"></a>我是3</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="4"></a>我是4</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="5"></a>我是5</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="6"></a>我是6</p>
		</div>
		<div class="mc_shop">
			<p class="mcs_top"><a name="7"></a>我是7</p>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
    $(".menu_con").scroll(function(){//监听滚动事件
        var nScrollTop = $(this)[0].scrollTop;//表示滚动条滚动的高度
        var arrHeight = getHeight($('.mc_shop'));
        var b = '';
        $.each(arrHeight,function(index,value){
            if(nScrollTop < value){
                b = index;
                return false;
            }
        });
        $('.menu_nav ul li').removeClass('onn');
        $('.menu_nav ul li').eq(b).addClass('onn');
    });
});

function getHeight(mc_shop) {
    var arr =  new Array();
    mc_shop.each(function (index,element) {
        if(index == 0){
            arr[index] = $(element).height();
        }else {
            arr[index] = arr[index-1] + $(element).height();
        }
    });
    return arr;
}
</script>