例简介

本文介绍利用JQ实现垂直导航功能，可点击左导航栏切换右边数据，也可滚动右边数据切换左导航栏标签，实现左右联动效果，效果如下：

实现过程

html、css和js代码如下：

1、html和css代码相对比较简单，可自行查看；

2、js代码：

1）$(window).scroll实现滚动右边数据切换左导航栏的标签：

11、“($(this).offset().top-$(window).innerHeight()/2))”影响滚动位置切换；

12、scroll_t定时器必须加，不然点击切换会有抖动效果；

2）tabs.children('li').click实现点击左导航栏切换右边数据。

<svg width="0" height="0">
			<defs>
				<filter id="goo">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
				</filter>
			</defs>
		</svg>
		<div class="target">
			<div>
				<i id="ball1" class="ball"></i>
				<i id="ball2" ref="ball2" class="ball"></i>
			</div>
		</div>
<div class="menu">
			<div class="menu-item" @click="updageMenuItem(0)">
				首页
				<span :class="{'menu-item-bg': menuActive==0}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(1)">
				发现
				<span :class="{'menu-item-bg': menuActive==1}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(2)">
				消息
				<span :class="{'menu-item-bg': menuActive==2}">
					<i class="iconfont"></i>
				</span>
			</div>
			<div class="menu-item" @click="updageMenuItem(3)">
				我的
				<span :class="{'menu-item-bg': menuActive==3}">
					<i class="iconfont"></i>
				</span>
			</div>
		</div>

<script>
updageMenuItem(index) {
			this.menuActive=index;
			let ball2=this.$refs.ball2;
			Array(4)
				.fill(0)
				.map((item, it)=> {
					ball2.classList.remove('active' + it);
				});
			setTimeout(()=>{
				ball2.classList.add('active' + index);
			},100)
		}
</script>

<style lang="less" scoped>
.profile {
	height: 100%;
	background: #aaaa7f;
	font-size: 14px;
	.menu,
	.target {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50px;
		left: 0;
	}
	.target > div {
		filter: url('#goo');
	}
	.menu {
		display: flex;
		z-index: 5;
		background: #fff;
		.menu-item {
			flex: 1;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			padding-bottom: 10px;
			position: relative;
			span {
				position: absolute;
				height: 35px;
				width: 35px;
				background: #aaaa7f;
				border-radius: 50%;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				opacity: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				i {
					color: #fff;
					font-size: 20px;
				}
				&.menu-item-bg{
					animation: menuItemBg .5s .2s forwards;
				}
			}
		}
	}
	.ball {
		width: calc(100% + 60px);
		height: 50px;
		border-radius: 0;
		background-color: #fff;
		position: absolute;
		left: -30px;
		margin: auto;
		z-index: 1;
	}
	#ball2 {
		left: 0;
		top: 0px;
		width: 50px;
		height: 50px;
		margin: auto;
		border-radius: 50%;
		&.active0 {
			left: calc(((100% / 4) - 50px) / 2);
			animation: ballUp .5s forwards;
		}
		&.active1 {
			left: calc(((100% / 4) - 50px) / 2 + 100% / 4);
			animation: ballUp .5s forwards;
		}
		&.active2 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 2);
			animation: ballUp .5s forwards;
		}
		&.active3 {
			left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 3);
			animation: ballUp .5s forwards;
		}
	}
}
@keyframes ballUp {
	from {
		top: 0;
	}
	to {
		top: -25px;
	}
}
@keyframes menuItemBg {
	from {
		top: 0;
		opacity: 0;
	}
	to {
		top: -15px;
		opacity: 1;
	}
}