网页定位导航

红太狼 2021-05-03 09:50 543阅读 0赞

<!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>

![20180521215804336][]

[20180521215804336]: /images/20210501/229751f42e1a46548cd3ba1ecd0b1296.png