JS原生代码去实现网页定位导航问题，滚动时导航不变是什么原因？
来源：6-2 使用JS为元素class赋值
蒲公英A月儿
2016-08-05 17:35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{margin: 0; padding: 0;}
body{font-size: 12px; line-height: 1.6;}
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;}/*display: inline;让li里的图片依次排列*/
#content .item li a img{width: 234px; height: 234px; border: none;}
#menu{position: fixed; top: 100px; left: 50%; margin-left: 400px; width: 80px;}
/*菜单固定位置不动用fixed,left: 50%是让元素先居中，然后再根据外部div（content）的宽度设置margin-left,这里的400为div宽度的一半*/
#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;}
/*IE测试工具：IETrster，，IE6不支持fixed,所以要加上一下代码*/
* 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 type="text/javascript">
// IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)：
// 在外面重新写一个方法
function getByClassName(obj,cls){
var elements = obj.getElementsByTagName("*");
var result = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == cls) {
result.push(elements[i]);
}
}
return result;
}
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];
var _itemTop = _item.offsetTop;
if (top > _itemTop -200) {
currentId = _item.id;
}else {
break;
}
}
if (currentId) {
// 给焦点a赋样式
for(var j = 0; j < menus.length; j++){
var _menu = menus[j];
var _href = _menu.href.split("#");
if (_href[_href.length-1] != currentId) {
_menu.removeClass("current");
} else{
_menu.addClass("current");
}
}
}
}
</script>
<title>网页定位导航</title>
</head>
<body>
<div id="menu"> <!-- div#menu ctrl+e 生成下列代码 -->
<ul> <!-- ul>li*5>a ctrl+e 生成下列代码 -->
<li><a href="#item1">1F 男装</a></li>
<li><a href="#item2">2F 女装</a></li><!-- #item2现在统一用ID做锚点链接 -->
<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">
<h2>1楼男装</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item2">
<h2>2楼女装</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item3">
<h2>3楼美妆</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item4">
<h2>4楼数码</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item5">
<h2>5楼母婴</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
</div>
</body>
</html>
写回答
关注
2回答
-
- 坐地生财
- 2016-08-06 11:50:54
function hasclass(obj,cls){
return obj.className.match(new Regxp("(\\a|^)"+cls+"(\\a|$)"));
}
function removeClass(obj,cls){
if(hasclass(obj,cls)){
var reg=new Regxp("(\\a|^)"+cls+"(\\a|$)")
obj.className=obj.className.relace(reg,"");
}
}
function removeClass(obj,cls){
if(!hasclass(obj,cls)){
obj.className+=""+cls;
}
}
-
- 坐地生财
- 2016-08-06 11:23:50
js原生代码是不能直接用removeClass,和addClass的，应该定义function removeClass(obj,cls){……}和function addClass(obj,cls){……}
网页定位导航特效
本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有
71404 学习 · 486 问题
相似问题