jq楼层导航(跟随页面滚动)

zyfacd

于 2020-04-09 17:55:27 发布

阅读量407

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/zyfacd/article/details/105416300

本文介绍如何使用JavaScript创建一种楼层导航，该导航会根据页面滚动自动高亮当前可见的内容区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		    	*{
   
   
		    	    margin: 0;
		    		padding: 0;
		    		}
		    		ul{
   
   
		    		list-style:none;
		    	}
		    	.floorNav{
   
   
		    		width:30px;
		    		height:auto;
		    		border:1px solid #ddd;
		    		position:fixed;
		    		top:150px;
		    		left:50px;
		    		display:none;
		    	}
		    	.floorNav li{
   
   
		    		width:30px;
		    		height:30px;
		    		border-bottom:1px solid #ddd;
		    		line-height:30px;
		    		text-align:center;
		    		position:relative;
		    		font-size:12px;
		    		cursor:pointer;
		    	} 
		    	.floorNav li span{
   
   
		    		width:30px;
		    		height:30px;
		    		background: #f00;
		    		color:#fff;
		    		position:absolute;
		    		left:0;
		    		top:0;
		    		display:none;
		    	}
		    	.floorNav li.hover span{
   
   
		    		display:block;
		    	}
		    	.floorNav li.hover span.active{
   
   
		    		background: #f00;
		    		color:#fff;
		    	}
		    	.floorNav li span.active{
   
   
		    		background: #fff;
		    		color:#f00;
		    		display:block;
		    	}
		    	.floorNav li.last{
   
   
		    		background: #f00;
		    		color:#Fff;
		    		border-bottom:none;
		    	}
		    	#header{
   
   
		    		width:800px;
		    		height:1000px;
		    		background: #2af;
		    		margin