                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

右側(cè)導(dǎo)航還是不會因為左側(cè)內(nèi)容滾動而改變焦點（評論中提到的問題已修改），求大神指導(dǎo)！

<!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{???????????????????/*重點*/
			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)聽滾動條
			$(window).scroll(function(){
				//滾動條距頂部距離
				var?H=$(document).scrollTop();
				//添加導(dǎo)航欄聯(lián)動效果
				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&&currentLink.attr("href")!=active_floor_id){
					currentLink.removeClass("current");
					menu.find("[href='"+currentId+"']").addClass("current");
				}
			});			
		});
	</script>
</body>
</html>

monsterlalala

2017-08-09

源自：網(wǎng)頁定位導(dǎo)航特效 4-3

關(guān)注問題我要回答

1521

操作

收起

2 回答

小白亭回答被采納 +2 積分
2017-08-09

161行的代碼錯了，<script src=" " type="text/javascript"></script>，你的?jquery-3.2.1.js 文件要用相對路徑寫入src（看你文件放在哪里），例如<script src="../jquery-3.2.1.js" type="text/javascript"></script>。