<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>側(cè)邊懸浮導(dǎo)航菜單</title>
<style?type="text/css">
/*重置默認(rèn)屬性*/
*{
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{???????????????????/*重點(diǎn)*/
position:?fixed;
top:100px;
left:50%;????????????/*先讓元素居中*/
margin-left:?400px;??/*根據(jù)內(nèi)容的寬度使其偏移至剛好貼合內(nèi)容框*/
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?數(shù)碼</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?數(shù)碼</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(){
//監(jiān)聽(tīng)滾動(dòng)條
$(window).scroll(function(){
//滾動(dòng)條距頂部距離
var?H=$(document).scrollTop();
//添加導(dǎo)航欄聯(lián)動(dòng)效果
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;
}
});
//給相應(yīng)欄目的導(dǎo)航的鏈接設(shè)置.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>
右側(cè)導(dǎo)航還是不會(huì)因?yàn)樽髠?cè)內(nèi)容滾動(dòng)而改變焦點(diǎn)（評(píng)論中提到的問(wèn)題已修改），求大神指導(dǎo)！
monsterlalala
2017-08-09 17:46:21
