jQuery左侧浮动的楼层电梯菜单代码

一款jQuery左侧浮动的楼层电梯菜单代码，可以通过鼠标点击左侧浮动菜单来切换，或者通过鼠标的滚动来切换显示不同的选项内容，整体样式比较简约，效果还可以的，喜欢的童鞋请收下吧。

分类：导航菜单 > 滚动菜单难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要设置好页面元素的样式，代码如下：

*{
	margin:0;
	padding:0;
}
html,body{
	font-size:16px;
	font-family:'microsoft YaHei';
}
a{
	text-decoration:none;
	color:#999;
}
ul li{
	list-style:none;
}
.slider{
	position:fixed;
	top:50%;
	left:2%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
.slider ul li{
	width:55px;
	height:30px;
	border-radius:5px;
	background:lightgreen;
	margin-bottom:3px;
	text-align:center;
	line-height:30px;
}
.slider ul li.active{
	background:green;
	margin-bottom:0px;
}
.slider ul li.active a{
	color:#fff;
}
.slider ul li:nth-of-type(even){
	width:3px;
	height:35px;
	background:lightgreen;
	margin:0 auto;
}
#header{
	height:280px;
	text-align:center;
	line-height:280px;
	font-size:60px;
	background:mediumpurple;
}
.content{
	width:1200px;
	margin:0 auto;
}
.content .section{
	height:700px;
	text-align:center;
	line-height:700px;
	font-size:60px;
	margin-bottom:20px;
}
.content .section1{
	background:lightpink;
}
.content .section2{
	background:lightblue;
}
.content .section3{
	background:lightgreen;
}
.content .section4{
	background:lightyellow;
}
.content .section5{
	background:deeppink;
}
.content .section6{
	background:lightcyan;
}

页面的body部分，分为两个区块，左侧的浮动菜单和右侧的选项内容，代码如下：

<div class="container">
	<div id="slider" class="slider">
		<ul>
			<li class="active"><a href="#">6层</a></li>
			<li class="line"></li>
			<li><a href="#">5层</a></li>
			<li class="line"></li>
			<li><a href="#">4层</a></li>
			<li class="line"></li>
			<li><a href="#">3层</a></li>
			<li class="line"></li>
			<li><a href="#">2层</a></li>
			<li class="line"></li>
			<li><a href="#">1层</a></li>
		</ul>
	</div>
	<!-- <div id="header">头部</div> -->
	<div id="content" class="content">
		<div class="section section1 div">电梯已到达6层</div>
		<div class="div"></div>
		<div class="section section2 div">电梯已到达5层</div>
		<div class="div"></div>
		<div class="section section3 div">电梯已到达4层</div>
		<div class="div"></div>
		<div class="section section4 div">电梯已到达3层</div>
		<div class="div"></div>
		<div class="section section5 div">电梯已到达2层</div>
		<div class="div"></div>
		<div class="section section6 div">电梯已到达1层</div>
	</div>
</div>

页面的底部，先引入jQuery库，然后设置好菜单点击和鼠标滚动等事件的响应，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("li:odd").hide();//li的第偶数个隐藏
	$("#slider ul li.active").next().show();//激活的li下面那条线显示
	$(window).scroll(function(){
		var winHeight = $(window).height();//浏览器可视窗口的高度
		var scrollHeight = $(window).scrollTop();//鼠标滚动的距离
		// if($("#header").height()){   //判断侧边栏什么时候显示
			$("#content .section").each(function(){
				if(winHeight+scrollHeight-$(this).offset().top>winHeight/2){
					$("#slider ul li").removeClass("active").prev(".line").hide();
					$("#slider ul li").eq($(this).index()).addClass("active").next(".line").show();
				}	
			})
		// }
	})
	$("#slider ul li").click(function(){
		var current = $("#content .div").eq($(this).index()).offset().top;
		$("html,body").animate({
			"scrollTop":current
		},500);
		$(this).addClass("active").siblings().removeClass("active").siblings(".line").hide();
		$(this).eq($(this).index()).addClass("active").next(".line").show();
	})
})
</script>