为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/网页定位导航特效

使用js写的为什么没有定位导航的效果呢，求帮忙看看

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>地狗购物网-网页定位导航效果</title>
	<style type="text/css">
		*{
			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: 80px;
		}

		#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-decoration: none;
			text-align: center;
		}

		#menu ul li a:hover,
		#menu ul li a.current{
			color: #fff;
			background: #0088bb;
		}
	</style>

	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 	<script>
		$(document).ready(function(){

			$(window).scroll(function(){
				
				var top = $(document).scrollTop();
				var menu = $("#menu");
				var items = $("#content").find(".item")

				var currentId = "";

				items.each(function(){
					var m = $(this);
					var itemTop = m.offset().top;
					if(top > itemTop - 200){
						currentId = "#" + m.attr("id");
					}
					else{
						return false;
					}
				});

				var currentLink = menu.find(".current");
				if ( currentId && currentLink.attr("href") != currentId){
					currentLink.removeClass("current");
					menu.find("[href=" + currentId + "]").addClass("current");

			}



			});
		});
	</script> -->
	<script type="text/javascript">

		//
		function getByClass(obj, cls){
			var elements = obj.getElementsByClassName("*");
			var result = [];
			for (var i = 0; i < elements.length; i++){
				if(elements[i].className == cls ){
					result.push(elements[i]);
				}
			}
			return result;
		}

		function hasClass(obj, cls){
			return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"))

		}

		function removeClass(obj, cls){
			if (hasClass(obj, cls)){
				var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
				obj.className = obj.className.replace(reg, "");
			}
		}

		function addClass( obj, cls){
			if (!hasClass( obj, cls)){
				obj.className += " " + cls;
			}
		}



		window.onload = function(){
			window.onscroll = function(){
				var top = document.documentElement ? document.documentElement.scrollTop :document.body.scrollTop;
				var menus = document.getElementById("menu").getElementsByTagName("a")
				var items = getByClass(document.getElementById("content"),"item");
				var currentId = "";

				for (var i = 0; i < items.length; i++){
					var _item = items[i];
					var _itemTop = _item.offsetTop;
					if (top > _itemTop - 200){
						currentId = _item.id;
					}
					else{
						break;
					}
				}

				if (currentId){
					//
					for( var j = 0; j < menus.length; j++){
						var _menu = menus[j];
						var _href = _menu.href.split("#");

						if (_href[_href.length - 1] != currentId){
							removeClass( _menu, "current");
						}
						else{
							addClass( _menu, "current");
						}
					}
				}
				
			}
		}
	</script>


</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>地狗购物网</h1>
	<div id="item1" class="item">
		<h2>1F 男装</h2>
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
		</ul>
		
	</div>	<div id="item2" class="item">
		<h2>2F 女装</h2>
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
		</ul>
		
	</div>	<div id="item3" class="item">
		<h2>3F 美妆</h2>
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
		</ul>
		
	</div>	<div id="item4" class="item">
		<h2>4F 数码</h2>
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
		</ul>
		
	</div>	<div id="item5" class="item">
		<h2>5F 母婴</h2>
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="1.jpg"></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>


慕UI8401790

2017-03-20

源自：网页定位导航特效  6-2

关注问题 我要回答
806
操作
收起

正在回答

2 回答

慕UI8401790 提问者
2017-03-23

是这样的，还有一个问题，就是

var top = document.documentElement ? document.documentElement.scrollTop :document.body.scrollTop;这一段代码chrome好像不支持，是为什么呢


0 回复 有任何疑惑可以回复我~
收起回答
qq_錵漈丶_0
2017-03-22

123行：var elements = obj.getElementsByTagName("*");

0 回复 有任何疑惑可以回复我~
收起回答
#1

慕UI8401790 提问者

是这样的，还有一个问题，就是 var top = document.documentElement ? document.documentElement.scrollTop :document.body.scrollTop;这一段代码chrome好像不支持，是为什么呢
2017-03-23 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71404    人
  • 解答问题       486    个

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

进入课程

本课相似问答

2 回答请问错哪了？为什么没有定位导航的效果？

1 回答为什么jquery库使用本地的滚动导航就没效果？？

1 回答请问为什么实现实现不了定位导航，找了半天都不知道什么原因，求帮忙看看

1 回答帮我看下为什么没效果

1 回答js实现导航特效，为什么火狐浏览器可以，谷歌效果出不来呢？求问大神…………
搜索更多本课相关问答

使用js写的为什么没有定位导航的效果呢，求帮忙看看

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信