内容简介
本文介绍利用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实现点击左导航栏切换右边数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>垂直导航</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="./css/scroll_tab.css">
</head>
<body>
<div class="sd-scroll-tab">
<div class="tab-box">
<ul class="tabs">
<li class="selected">短袖</li>
<li>POLO衫</li>
<li>卫衣</li>
<li>男款</li>
<li>热卖</li>
<li>女款</li>
</ul>
</div>
<div class="scroll-con">
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>短袖</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>POLO衫</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>卫衣</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>男款</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>热卖</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
<div class="sd-sections">
<div class="sect-top">
<div class="col-c">
<h3>女款</h3>
</div>
</div>
<div class="sect-con">
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/1.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/2.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/3.jpg" alt="" />
<p class="text">衣服</p>
</a>
<a href="" class="clothes">
<img src="images/4.jpg" alt="" />
<p class="text">衣服</p>
</a>
</div>
</div>
</div>
</div>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
// 垂直导航代码
var sections = $('.scroll-con').children('.sd-sections');
var tabs = $('.sd-scroll-tab .tabs');
var isTabClick = false,scroll_t;
$(window).scroll(function(){
sections.each(function() {
if(!isTabClick && $(window).scrollTop() > ($(this).offset().top-$(window).innerHeight()/2)){
tabs.children('.selected').removeClass('selected');
tabs.children('li').eq($(this).index()).addClass('selected');
}
});
// 滚动结束（加定时器，不然点击切换会有抖动）
clearTimeout(scroll_t);
scroll_t = setTimeout(function(){
isTabClick = false;
},100)
});
// 点击 tab 时，滚动到相应位置
tabs.children('li').click(function(){
tabs.children('.selected').removeClass('selected');
$(this).addClass('selected');
isTabClick = true;
$('html,body').animate({scrollTop: sections.eq($(this).index()).offset().top},400);
});
})
</script>
</body>
</html>body {
font-size: 3.7vw;
}
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.sd-scroll-tab {
position: relative;
display: flex;
}
.sd-scroll-tab .tab-box {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 26.7vw;
border-right: 1px solid #d9d9d9;
}
.sd-scroll-tab .tab-box .tabs li.selected {
background-color: #f6f6f6;
color: #f90133;
}
.sd-scroll-tab .tab-box .tabs li {
cursor: pointer;
padding: 2.7vw 0;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.scroll-con {
margin-left: 26.7vw;
padding: 0 4vw;
}
.sd-sections .sect-top {
padding: 4vw 0 5.3vw;
font-weight: bold;
font-size: 4.3vw;
}
.sd-scroll-tab .sect-con .clothes {
margin: 4vw 5.1vw 4vw 0;
display: inline-block;
cursor: pointer;
}
.sd-scroll-tab .sect-con .clothes:nth-child(3n) {
margin-right: 0;
}
.sd-scroll-tab .sect-con .clothes img {
width: 17.6vw;
height: 18.1vw;
}
.sd-scroll-tab .sect-con .clothes .text {
color: #000;
text-align: center;
margin-top: 1.3vw;
}
