楼梯式导航-京东左侧楼梯导航-CSDN博客

本文链接：https://blog.csdn.net/qq1556837534/article/details/133798789

文章描述了一个使用HTML、CSS和JavaScript（包括jQuery）实现的网页滚动时动态显示楼层导航的示例，当用户滚动到相应图片区域上方时，导航会自动切换到相应的楼层。

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

<html>
	<head>
		<title>please enter your title</title>
		<meta charset="gbk">
		<meta name="Author" content="楼梯导航">
		<style type='text/css'>
			*{ margin:0; padding:0;font-family:'Microsoft yahei';}
			a{ text-decoration:none;}
			a img{ display:block; border:none;}
			li{ list-style:none;}
			
			#mainPage{
				width:1210px;
				margin:0 auto;
			}

			#header,#fotter{
				width:1210px;
				height:1000px;
				background:pink;
				font-weight:bold;
				font-size:30px;
			}

			#slide{
				width:30px;
				height:250px;
				box-shadow:0 0 3px #000;
				position:fixed;
				top:50%;
				MARGIN-TOP:-125px;
				margin-left:-30px;
				display:none;
			}
			#slide ul li{
				width:30px;
				height:30px;
				color:#000;
				line-height:30px;
				text-align:center;
				font-size:12px;
				cursor:pointer;
			}
			#slide ul li.active{
				background:#f60;
				color:#fff;
			}
			#slide ul li:hover{
				background:#f60;
				color:#fff;
			}
		</style>
		<script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js'></script>
	</head>
	<body>
		<div id="mainPage">
			
			<div id="header">header</div>

			<div class="content"><img src="img/01.jpg" alt="" /></div>
			<div class="content"><img src="img/02.png" alt="" /></div>
			<div class="content"><img src="img/03.png" alt="" /></div>
			<div class="content"><img src="img/04.png" alt="" /></div>
			<div class="content"><img src="img/05.png" alt="" /></div>
			<div class="content"><img src="img/06.png" alt="" /></div>
			<div class="content"><img src="img/07.png" alt="" /></div>
			<div class="content"><img src="img/08.png" alt="" /></div>
			
			<div id="fotter"> footer</div>

			<div id="slide">
				<ul>
					<li>1F</li>
					<li>2F</li>
					<li>3F</li>
					<li>4F</li>
					<li>5F</li>
					<li>6F</li>
					<li>7F</li>
					<li>8F</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">

			(function(){
				var $slide = $('#slide');
				var $slideLi = $('#slide ul li');
				var $content = $('.content');


				$(window).scroll(function(){
					var scrollTop = $(document).scrollTop();
					if ( scrollTop>400 )
					{
						$slide.show();
						for (var i=0;i<$content.length;i++ )
						{
							if ( $content.eq(i).position().top > scrollTop )
							{
								if ( i-1>=0 )
								$slideLi.eq(i-1).addClass('active').siblings().removeClass('active');
								break;
							}
							if ( i == $content.length-1 )
							{
								$slideLi.eq(i).addClass('active').siblings().removeClass('active');
							}
						}
					}else
					{
						$slide.hide();
					}
				});

				$slideLi.click(function(){
					var index = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					var top = $content.eq(index).position().top;
					//$(document).scrollTop( top );
					$('html,body').animate({
						scrollTop : top
					},500);
				});

			})();
			

		</script>
	</body>
</html>