右侧导航还是不会因为左侧内容滚动而改变焦点（评论中提到的问题已修改），求大神指导！

<!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&&currentLink.attr("href")!=active_floor_id){
					currentLink.removeClass("current");
					menu.find("[href='"+currentId+"']").addClass("current");
				}
			});			
		});
	</script>
</body>
</html>
monsterlalala
浏览 1110回答 1
右侧导航还是不会因为左侧内容滚动而改变焦点（评论中提到的问题已修改），求大神指导！

1回答
