网页定位导航

最新推荐文章于 2020-09-21 16:34:18 发布

原创最新推荐文章于 2020-09-21 16:34:18 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的网页导航特效案例。该案例包含一个固定侧边栏菜单，点击菜单项可以平滑滚动到页面相应部分，并且会高亮显示当前所处的楼层。此外，当页面滚动时，菜单中的链接会自动更新为当前楼层。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页导航特效</title>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-size: 12px;
				line-height: 1.7;
			}
			
			li {
				list-style: none;
			}
			
			#content {
				width: 800px;
				margin: 0 auto;
				padding: 20px;
			}
			
			#content h1 {
				color: #0088bb;
			}
			
			#content .item {
				padding: 20px;
				margin-bottom: 20px;
				border: 1px dotted #0088bb;
			}
			
			#content .item h2 {
				font-size: 16px;
				font-weight: bold;
				border-bottom: 2px solid #0088bb;
				margin-bottom: 10px;
			}
			
			#content .item li {
				display: inline;
				margin-right: 10px;
			}
			
			#content .item li a img {
				width: 230px;
				height: 230px;
				border: none;
			}
			
			#menu {
				position: fixed;
				top: 100px;
				left: 50%;
				margin-left: 400px;
				width: 50px;
			}
			
			#menu ul li a {
				display: block;
				margin: 5px 0;
				font-size: 14px;
				font-weight: bold;
				color: #333;
				width: 80px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
			}
			
			#menu ul li a:hover,
			#menu ul li a.current {
				color: #fff;
				background: #0088bb;
			}
		</style>
	</head>

	<body>
		<div id="menu">
			<ul>
				<li>
					<a href="#item1" class="current">1F 男装</a>
				</li>
				<li>
					<a href="#item2">2F 女装</a>
				</li>
				<li>
					<a href="#item3">3F 美妆</a>
				</li>
				<li>
					<a href="#item4">4F 数码</a>
				</li>
				<li>
					<a href="#item5">5F 母婴</a>
				</li>
			</ul>
		</div>
		<div id="content">
			<h1>网页导航demo</h1>
			<div id="item1" class="item">
				<h2>1F 男装</h2>
				<ul>
					<li>
					。。。省略内容
					</li>
				</ul>
			</div>
			<div id="item2" class="item">
				<h2>2F 女装</h2>
				<ul>
					<li>
					。。。省略内容
					</li>
				</ul>
			</div>
			<div id="item3" class="item">
				<h2>3F 美妆</h2>
				<ul>
					<li>
					。。。省略内容
					</li>
				</ul>
			</div>
			<div id="item4" class="item">
				<h2>4F 数码</h2>
				<ul>
					<li>
					。。。省略内容
					</li>
				</ul> 
			</div>
			<div id="item5" class="item">
				<h2>5F 母婴</h2>
				<ul>
				    <li>
					。。。省略内容
					</li>
				</ul>
			</div>
		</div>
		<script>
			/**
			 * Created by Clam on 2016/7/14.
			 */
			$(function() {
				//滚动条发生滚动
				$(window).scroll(function() {
					/*在这里做一些事情*/
					var top;
					top = $(document).scrollTop();
					var menu = $("#menu");
					var items = $("#content").find(".item");
					var currentId = ""; //当前所在的楼层(item) #id
					items.each(function() {
						var m = $(this);
						var itemTop = m.offset().top;
						if(top > itemTop - 200) {
							currentId = '"#' + m.attr("id") + '"';
						} else {
							return false;
						}
					})
					//给相应的楼层a设置class：current，取消其他链接的current
					var currentLink = menu.find(".current");
					if(currentId && currentLink.attr("href") != currentId) {
						currentLink.removeClass("current");
						menu.find('[href=' + currentId + ']').addClass("current");
					}
				})
				//锚点跳转滑动效果
				$('a[href*=#],area[href*=#]').click(function() {
					console.log(this.pathname)
					if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
						var $target = $(this.hash);
						$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
						if($target.length) {
							var targetOffset = $target.offset().top;
							$('html,body').animate({
									scrollTop: targetOffset
								},
								1000);
							return false;
						}
					}
				});
			});
		</script>
	</body>
</html>