滚动div内容，变化导航栏状态，点击导航栏切换div内容
<script src="cdn.bootcss/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');
$('.menu_nav ul li').eq(b).addClass('onn');
});
js导航栏下拉菜单
});
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。