jQuery楼层导航制作(含完整源码)

本博文源于jQuery基础，旨在实现楼层导航制作。先放实验效果。

实验效果

点击哪个跳转哪个，这就是最终效果。

实验步骤

书写html结构

试想html需要什么，导航条要写进去，导航指向的内容要写进去。就这两个咯！那我们就需要考虑导航条如何制作用ul模拟。那导航指向的内容用div区块模拟，然后里面装填个h3就行了。代码如下

<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>
		<li data-navli = "8">科技</li>
		<li data-navli = "9">生活</li>
	</ul>
</div>
<div class="inner_c header" style="height: 363px;">
我是头部
</div>
<div class="inner_c" data-grid = "1" style="height: 563px;">
	<h3>直播</h3>
</div>
<div class="inner_c" data-grid = "2" style="height: 563px;">
	<h3>动画</h3>
</div>
<div class="inner_c" data-grid = "3" style="height: 863px;">
	<h3>番剧</h3>
</div>
<div class="inner_c" data-grid = "4" style="height: 263px;">
	<h3>国创</h3>
</div>
<div class="inner_c" data-grid = "5" style="height: 563px;">
	<h3>音乐</h3>
</div>
<div class="inner_c" data-grid = "6" style="height: 463px;">
	<h3>舞蹈</h3>
</div>
<div class="inner_c" data-grid = "7" style="height: 363px;">
	<h3>游戏</h3>
</div>
<div class="inner_c" data-grid = "8" style="height: 563px;">
	<h3>科技</h3>
</div>
<div class="inner_c" data-grid = "9" style="height: 563px;">
	<h3>生活</h3>
</div>

书写css代码

css代码注意什么？试想导航指向内容居中，背景颜色设置。而导航条是最重要的，位置固定，没有li小标题样式，点击每个的时候是不是有一种样式效果，这个就需要用信号量实现，因此，css代码如下：

 1. {
	margin: 0;
	padding: 0;
}
.inner_c {
	width: 1000px;
	margin: 0 auto;
	background-color: #eee;
	margin-bottom: 20px;
}
.navbar {
	position: fixed;
	width: 40px;
	border: 1px solid #ccc;
}
.navbar ul {
	list-style: none;
}
.navbar li {
	line-height: 300%;
	text-align: center;
}
.navbar li.cur {
	background-color: navy;
	color: white;
}

书写jquery代码

jquery代码需要注意什么？答：事件！！！

1. 首先需要每个div导航指向内容都跟自身窗口动态对齐，

2. 再次导航条需要也是跟窗口保持贴心对齐

3. 然后将导航条指向的内容存放到数组里

4. 然后开始卷动，卷动时导航条变，导航条颜色也要变。

5. 最后就是点击导航条，导航条指向内容改变

因此代码如下：

<script type="text/javascript" src="jslib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$("#navbar").css("right",$(window).width()/2-500-40);
	
	$(window).resize(function(){
		$("#navbar").css("right",$(window).width()/2-500-40);
	});
	
	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>

总结

楼层导航是网页上固定定位一个悬浮条，导航条指向栏目板块。当页面卷动到某个栏目板块时，楼层导航上对应的图标会高亮显示；另一个方面，当单击楼层导航上的图标，将会命令窗口以动画形式卷动到相应楼层。