SOURCE

//	轮播
		  var mySwiper = new Swiper ('.swiper-container', {
			direction: 'horizontal', // 垂直切换选项
			loop: true, // 循环模式选项
			autoplay:true,
		  })  
		//	better-scroll
		//	左侧第一个有样式
		$(".classify:nth-child(1)").addClass("active").siblings().removeClass("active")
		var scrollY = 0;
		var currentid = 1;
		var menuScroll = new BScroll(document.querySelector(".menuWrapper"),{
			probeType:3,
			click:true
		});
		var goodScroll = new BScroll(document.querySelector(".goodWrapper"),{
			probeType:3,
			click:true
		});
		menuScroll.on('touchEnd',function(pos){
			// 左侧滑动事件
		});
		var listHeight = [];
		calculateHeight();
		function calculateHeight(){
			var height = 0;
			listHeight.push(height);
			var foodList = $(".good-list-hook");
			for(var i = 0;i < foodList.length;i ++){
				height += foodList[i].clientHeight;
				listHeight.push(height)
			}
		}
		goodScroll.on("scroll",function(pos){
			//	取绝对值
			scrollY = Math.abs(Math.round(pos.y))
			currentIndex();
		});
		
		//	遍历listHeight 中的区间,使用获取到的区间与scrollY作对比
		function currentIndex(){
			for(var i = 0;i<listHeight.length;i++){
				//	获取商品区间的范围
				var height1 = listHeight[i];
				var height2 = listHeight[i+1];
				//	判断是否在上述区间里
				if(!height2 || scrollY >= height1 && scrollY < height2){
					currentid = i;
					console.log(currentid)
					$(".classify:nth-child("+(currentid+1)+")").addClass("active").siblings().removeClass("active")
					return i;
				}
				// console.log(scrollY)
			}
			return 0;
		}
		//	点击左侧后右侧变化
		$(".classify").click(function(){
			//	左侧点击后切换样式
			$(this).addClass("active").siblings().removeClass("active");
			//	拿到点击的索引
			var index  = $(this).index();
			//	用索引匹配右边的dom元素
			var element = document.querySelectorAll(".good-list-hook")[index];
			//	跳转到右侧对应的dom节点
			goodScroll.scrollToElement(element,250)
		})

<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="https://wallpaper.infinitynewtab.com/wallpaper/341.jpg" alt=""></div>
				<div class="swiper-slide"><img src="https://wallpaper.infinitynewtab.com/wallpaper/342.jpg" alt=""></div>
				<div class="swiper-slide"><img src="https://wallpaper.infinitynewtab.com/wallpaper/348.jpg" alt=""></div>
			</div>
		</div>
		<div class="good-list">
			<div class="menuWrapper">
				<ul class="content">
					<li class="classify">水果</li>
					<li class="classify">玩具</li>
					<li class="classify">零食</li>
					<li class="classify">早餐</li>
					<li class="classify">午餐</li>
					<li class="classify">晚餐</li>
					<li class="classify">手套</li>
					<li class="classify">衣服</li>
					<li class="classify">衬衣</li>
					<li class="classify">西装</li>
					<div style="clear: both;"></div>
				</ul>
			</div>
			<div class="goodWrapper">
				<ul>
					<li class="good-list-hook">
						<ul class="content">
							<li>水果</li>
							<li>香蕉</li>
							<li>香蕉</li>
							<li>香蕉</li>
							<li>香蕉</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>玩具</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>零食</li>
							<li>辣条</li>
							<li>泡泡堂</li>
							<li>卫龙</li>
							<li>辣条</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>早餐</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>午餐</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>晚餐</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>手套</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>衣服</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>衬衣</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
					<li class="good-list-hook">
						<ul class="content">
							<li>西装</li>
							<li>机器人</li>
							<li>机器人</li>
							<li>四驱赛车</li>
							<li>暴龙兽</li>
							<div style="clear:both"></div>
						</ul>
					</li>
				</ul>
				
			</div>
		</div>

*{
	margin: 0;
	padding: 0;
}
img{
	width: 100%;
	height: 100%;
}
ul{
	list-style: none;
}

.swiper-container{
	width: 100%;
	height: 200px;
}
.good-list{
	width: 100%;
	position: absolute;
	top: 200px;
	bottom: 130px;
	overflow: hidden;
	display: flex;
}
.menuWrapper{
	height: 320px;
	height: 100%;
	width: 110px;
	overflow: hidden;
}
.menuWrapper ul{
	list-style: none;
}
.menuWrapper ul .active{
	color: #fff;
	background: orange;
}
.menuWrapper ul li{
	float: left;
	/* padding: 10px; */
	height: 40px;
	line-height: 40px;
	width: 110px;
	background: pink;
	border-bottom: 1px solid #000;
	color: #000;
	box-sizing: border-box;
	text-align: center;
}
.goodWrapper{
	flex: 1;
}
.goodWrapper .content{
	list-style: none;
}
.goodWrapper .content li{
	float: left;
	width: 120px;
	height: 120px;
	text-align: center;
	background: orangered;
	color: #fff;
	line-height: 120px;
	margin: 10px;
}