jQuery楼层导航

首先我们来看看效果:

1.先编写html结构

<div class="navbar" id="navbar">
	<ul>
		<li data-navli = "1">吃鸡</li>
		<li data-navli = "2">金铲铲</li>
		<li data-navli = "3">王者荣耀</li>
		<li data-navli = "4">刺客信条</li>
		<li data-navli = "5">原神</li>
		<li data-navli = "6">塞尔达</li>
		<li data-navli = "7">永劫无间</li>
	</ul>
</div>
<div class="inner_c header" style="height: 500px;">
   
</div>
<div class="inner_c" data-grid = "1" style="height: 500px;">
	<h3>吃鸡</h3>
</div>
<div class="inner_c" data-grid = "2" style="height: 500px;">
	<h3>金铲铲</h3>
</div>
<div class="inner_c" data-grid = "3" style="height: 500px;">
	<h3>王者荣耀</h3>
</div>
<div class="inner_c" data-grid = "4" style="height: 500px;">
	<h3>刺客信条</h3>
</div>
<div class="inner_c" data-grid = "5" style="height: 500px;">
	<h3>原神</h3>
</div>
<div class="inner_c" data-grid = "6" style="height: 500px;">
	<h3>塞尔达</h3>
</div>
<div class="inner_c" data-grid = "6" style="height: 500px;">
	<h3>永劫无间</h3>
</div>

2.css代码:

body{
		  background-color: #000;
        /* 这里是大背景 */
		  background-image: url(背景8.png);
		  background-size: cover;
		  background-repeat: no-repeat;
		  background-attachment: fixed;
		  background-position: center;
		  height: 100%;
		  width: 100%;
		  margin: 0;
		  padding: 0;
		  overflow: hidden;}
* {
	margin: 0;
	padding: 0;
}
.inner_c {
   /* 添加小背景 */
   background:url(背景图片.jpg)
      center center;
      background-size: cover;
      height: 900px;
      width: 100%;
	width: 1000px;
	margin: 0 auto;
	background-color: lightgray;
	margin-bottom: 20px;
}
.navbar {
	position: fixed;
	width: 70px;
	border: 1px solid blue;
}
.navbar ul {
	list-style: none;
}
.navbar li {
	line-height: 300%;
	text-align: center;
}
.navbar li.cur {
	background-color: navy;
	color: white;
}

3.jQuery代码:

<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
	$("#navbar").css("right",$(window).width()/2-500-71);
	
	$(window).resize(function(){
		$("#navbar").css("right",$(window).width()/2-500-71);
	});
	
	var headerH = $(".header").outerHeight(true);
	var gridHeightArr = [0];
	
	function setGridHeightArr() {
		var sum = 0;
		gridHeightArr = [0];
		
		$("div[data-grid]").each(function(){
			gridHeightArr.push($(this).offset().top);
		});
	};
	
	setGridHeightArr();
	$(window).scroll(function(){
		var A = $(window).scrollTop() - headerH + 150;
		if( A <= 0) {
			$(".navbar ul li").removeClass("cur");
			return ;
		}
		for(var i = 1;i<gridHeightArr.length;i++) {
			if(A > gridHeightArr[i-1] && A < gridHeightArr[i]) {
				break;
			}
		}
		$(".navbar ul li").eq(i-1).addClass("cur").siblings().removeClass("cur");
	});
	
	$(".navbar ul li").click(function(){
		var floor = $(this).data("navli");
		var h = $("div[data-grid="+floor+"]").offset().top;
		$("html,body").animate({
			"scrollTop":h
		},300);
	});
</script>

最后把这些代码编写到一个文件里楼层导航就做好了