我跟着教程写了下用原生js实现，经过测试，在火狐中可以，但在chrome中就不行；经过调试，我发现在chrome中获取的id值是不对的
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页定位导航效果 使用原生js</title>
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.7; color:#333;}
ul,li{ list-style: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; text-decoration:none; color:#333; width:80px; height:50px; line-height:50px; text-align:center;}
#menu ul li a:hover,
#menu ul li a.current{ color:#FFF; background-color:#009;}
#content{ width:800px; margin:0 auto; padding:20px;}
#content h2{ color:#F30;}
#content .item{ padding:20px; margin-top:20px; border:2px dotted #003333; height:200px;}
#content .item h3{ font-size:16px; border-bottom:2px solid #039; margin-bottom:10px;}
/*hack*/
*html,*html body{background-image: url(about:blank);background-attachment: fixed;}
*html #menu{position: absolute;top: expression(((e=document.documentElement.scrolltop)?e:document.body.scrolltop)+100+'px');}
</style>
<script>
//根据classname获取元素
function getByclassName(obj,cls){
var e = obj.getElementsByTagName("*");
var result = [];
for (var i=0;i<e.length;i++){
if(e[i].className == cls){
result.push(e[i]);
}
}
return result;
}
function hasClass(obj,cls){
return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function removeClass(obj,cls){
if(hasClass(obj,cls)){
//remove
var req = new RegExp("(\\s|^)" + cls + "(\\s|$)");
obj.className = obj.className.replace(req,"");
}
}
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 = getByclassName(document.getElementById("content"),"item");
var currentId = "";
for(var i=0;i<items.length;i++){
var _item = items[i];
console.log(_item.id);
var _itemTop = _item.offsetTop;
if(top>_itemTop-20){
currentId = _item.id;
}else{
break;
}
}
if(currentId){
//给正确的a加上class
for(var j=0;j<menus.length;j++){
var _menu = menus[j];
var _href = _menu.href.split("#");
console.log(_href);
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>
<li><a href="#item6">6F 母婴</a></li>
<li><a href="#item7">7F 海外</a></li>
</ul>
</div>
<div id="content">
<h2>购物网</h2>
<div id="item1" class="item">
<h3>1F 男装</h3>
</div>
<div id="item2" class="item">
<h3>2F 女装</h3>
</div>
<div id="item3" class="item">
<h3>3F 美妆</h3>
</div>
<div id="item4" class="item">
<h3>4F 礼服</h3>
</div>
<div id="item5" class="item">
<h3>5F 数码</h3>
</div>
<div id="item6" class="item">
<h3>6F 母婴</h3>
</div>
<div id="item7" class="item">
<h3>7F 海外</h3>
</div>
</div>
</body>
</html>
最好是上代码
另外,js获取ID的方法是都兼容的,除非你页面上有多个ID,导致获取到的不对