<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>侧边悬浮导航菜单</title>
<style type="text/css">
/*重置默认属性*/
*{
padding:0px;
margin:0px;
font-size:12px;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
/*content*/
#content{
width: 800px;
margin:0 auto;
padding:20px;
}
#content h1{
font-size: 18px;
font-weight: bold;
color:#0088bb;
}
.floor{
border:1px solid #ddd;
padding:20px;
margin-bottom: 10px;
}
.floor h2{
border-bottom: 2px solid #0088bb;
font-size: 16px;
padding-bottom: 5px;
}
.floor li{
display:inline-block;
margin:5px;
}
.floor img{
width:230px;
height:230px;
border:none;
}
/*menu*/
#menu{ /*重点*/
position: fixed;
top:100px;
left:50%; /*先让元素居中*/
margin-left: 400px; /*根据内容的宽度使其偏移至刚好贴合内容框*/
width:80px;
}
#menu li{
height: 30px;
line-height: 30px;
border:1px solid #ddd;
}
#menu a{
font-size: 15px;
font-weight: bold;
color:#0088bb;
display: block;
text-align: center;
}
#menu a:hover,
#menu a.current{
color:white;
background-color: #0088bb;
border:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#floor1" class="current">1F 男装</a></li>
<li><a href="#floor2">2F 女装</a></li>
<li><a href="#floor3">3F 美妆</a></li>
<li><a href="#floor4">4F 数码</a></li>
<li><a href="#floor5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>XXXXX</h1>
<div id="floor1" class="floor">
<h2>1F 男装</h2>
<ul>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
</ul>
</div>
<div id="floor2" class="floor">
<h2>2F 女装</h2>
<ul>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
</ul>
</div>
<div id="floor3" class="floor">
<h2>3F 美妆</h2>
<ul>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
</ul>
</div>
<div id="floor4" class="floor">
<h2>4F 数码</h2>
<ul>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
</ul>
</div>
<div id="floor5" class="floor">
<h2>5F 母婴</h2>
<ul>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
<li><a href=""><img src="a.jpeg"></a></li>
</ul>
</div>
</div>
<script type="jquery-3.2.1.js">
$(document).ready(function(){
//监听滚动条
$(window).scroll(function(){
//滚动条距顶部距离
var H=$(document).scrollTop();
//添加导航栏联动效果
var menu=$("#menu");
var floors=$(".floor");
var active_floor_id="";
floors.each(function(){
var m=$(this);
var floor_top=m.offset().top();
if(H>floor_top){
active_floor_id="#"+m.attr('id');
}
else{
return;
}
});
//给相应栏目的导航的链接设置.current，取消其余的.current
var currentLink=menu.find(".current");
if(currentId&¤tLink.attr("href")!=active_floor_id){
currentLink.removeClass("current");
menu.find("[href='"+currentId+"']").addClass("current");
}
});
});
</script>
</body>
</html>
