<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,p,h2,h3,ul,ul,li{padding: 0;margin: 0;}
img{border: none;vertical-align: top;}
li{list-style: none;}
a{text-decoration: none;}
.clear{zoom: 1;}
.clear:after{content: '';display: block;clear: both;}
#content{
width: 800px;
margin: 0 auto;
border: 2px solid coral;
padding: 20px;
}
#content h2,.demo h3{
font-family: "微软雅黑";
line-height: 30px;
border-bottom: 2px solid coral;
color: skyblue;
margin-bottom: 10px;
}
.demo{
border: 2px solid skyblue;
padding: 10px;
margin-bottom: 30px;
}
.demo h3{
color: springgreen;margin: 0 30px;
}
.demo ul{
text-align: center;padding: 20px;
}
.demo li{
float: left; padding: 20px;
}
.demo a{}
.demo img{
width: 200px;height: 250px;
}
#menu{
position: fixed;
left: 50%;
margin-left: 430px;
width: 120px;
top: 100px;
}
#menu li{
width: 120px;
height: 40px;
font-size: 24px;
font-family: "微软雅黑";
margin-bottom: 10px;
float: left;
text-align: center;
}
#menu li a{
color: black;display: block;
background: wheat;
}
#menu li a:hover,
#menu li a.active
{
background: coral;
color: white;
}
</style>
<!--<script type="text/javascript" src="js/jquery-3.0.0.js" ></script>-->
<!--<script src="js/jquery-3.1.0 (1).js" type="text/javascript"></script>-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $menu=$("#menu");
//滚动条滚动的距离
var scrollTop=$(document).scrollTop();
var demos=$('#content').find('.demo');
var currentId=''; //当前所在楼层的#id
demos.each(function(){
var iNow=$(this);
var iTop=iNow.offset().top;
if(iTop-200<scrollTop){
currentId='#'+iNow.attr('id');
}else{
return false; //跳出当前遍历，提高效率
}
})
//给相应楼层加class
var currentLink=$menu.find('.active');
if(currentId&¤tLink.attr('href')!=currentId){
currentLink.removeClass('active');
$menu.find('[href='+currentId+']').addClass('active');
}
})
})
</script>
</head>
<body>
<ul id="menu" class="clear">
<li><a class="active" href="#demo1">阿呆</a></li>
<li><a href="#demo2">皮卡皮卡</a></li>
<li><a href="#demo3">西瓜熊</a></li>
<li><a href="#demo4">妙蛙</a></li>
<li><a href="#demo5">打靶</a></li>
</ul>
<div id="content">
<h2>樱桃丸子小铺</h2>
<div class="demo" id="demo1">
<h3>阿呆</h3>
<ul class="clear">
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
<li><a href="#"><img src="img/12.jpg"/></a></li>
</div>
<div class="demo" id="demo2">
<h3>皮卡皮卡</h3>
<ul class="clear">
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
<li><a href="#"><img src="img/96.jpg"/></a></li>
</ul>
</div>
<div class="demo" id="demo3">
<h3>西瓜熊</h3>
<ul class="clear">
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
<li><a href="#"><img src="img/35.jpg"/></a></li>
</ul>
</div>
<div class="demo" id="demo4">
<h3>妙蛙</h3>
<ul class="clear">
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
<li><a href="#"><img src="img/30.jpg"/></a></li>
</ul>
</div>
<div class="demo" id="demo5">
<h3>打靶</h3>
<ul class="clear">
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
<li><a href="#"><img src="img/24.jpg"/></a></li>
</ul>
</div>
</div>
</body>
</html>
具体1.x版本和3.x版本的方法哪里不同我也不太清楚··但实验结果是1.x的版本('[href='+currentId+']')可以实现
但3.x版本就要在=号后加个"，]号前加个"··也就是('[href="'+currentId+'"]')
3.x需要拼成[href="item几"]
1.x需要拼成[href=item几]