vue侧边导航页面效果

左边是侧边导航的效果，右边是展示内容的小组件。

展示动图如下：

点击左边的导航，右边展示相对应的区域；
滑动右边，左边也会同步。
左侧的导航可以下拉，点击右边内容区域左边的导航不会上下移动。
引入了jquery 库。
关键代码：

mounted(){
   
		var vm = this;
		$('#content').scroll(function(e){
   
			let scrollTop = e.target.scrollTop;
			let index  =  scrollTop/221;  //221 是右边每个item项的高度
			console.log(index)
			vm.selectedIndex = Math.floor(index/0.77); // 0.77 数字大小自己决定 ，试验几次就能得到自己想要的效果。
			
		})
		},
		

子组件
完整代码

<template>
	<div class="container">
		<div class="flex-wrap">
			<div class="leftnav-wrap">
				<ul class="nav-list">
					<li :class="{'nav-li':true,'orange':isActive(index)}" v-for="(item,index) in navdetail"  @click="activeItem(index)" :index="index">{
   {
   item.text}}</li>
				</ul>
			</div>
		
		<!-- 具体展示文字区域 -->
		<div id="content" ref="content">
			<ul class="goods-detail">
			<li class="go