<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页定位导航导航效果</title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
body{
font-size:12px;
line-height:1.7;
}
li{list-style:none;}
#content{
width:800px;
margin:0 auto;
padding:20px;
}
#content h1{
color:#224444;
}
#content .item{
padding:20px;
margin-bottom:20px;
border:1px solid #269ABC;
}
#content .item h1{
font-size:16px;
font-weight:bold;
border-bottom:2px solid #0088bb;
margin-bottom:10px;
}
#content .item li{
display:inline;
}
#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:#ccc;
width:88px;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
}
#menu ul li a:hover,
#menu ul li a .current{
color:#fff;
background-color:#0088bb;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function getclass(obj,name){
var elements = document.getElementsByTagName("*");
var result= [];
for(var i=0; i<elements.length; i++){
if(elements[i].className==name){
result.push(elements[i]);
}
}
return result;
}
function hasclass(obj,name){
return obj.className.match(new RegExp("(\\s|^)" + name + "(\\s|^)"));
}
function removeclass(obj,name){
if(hasclass(obj,name)){
var reg = new RegExp("(\\s|^)" +name + "(\\s|^)");
obj.className = obj.className.replace(reg, "");
}
}
function addclass(obj,name){
if(!hasclass(obj,name)){
obj.className += " " + name;
}
}
window.onload = function(){
window.onscroll=function(){
var top = document.documentElement.scrollTop||document.body.scrollTop;
var all =document.getElementById("#menu").getElementByTagName("a");
var items = getclass(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; //跳出循环
}
}
//给正确的menu下的 当前a 赋值
if(currentId){
for(var j=0; j<all.length; j++){
var _a = all[j] ;
var _href = _a.href.split("#");
if(_href[_href.length-1] != currentId){
removeClass(_a,"current"); //不等于的话
}else{
addClass(_a,"current"); //相等
}
}
}
}
}
/* $(document).ready(function(){
$(window).scroll(function(){
var top = $(document).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
var currentId=""; //给楼层item设置id
items.each(function(){
var t= $(this);
var itemtop = t.offset().top;
if(top > itemtop-200){
currentId = "#"+ t.attr("id");
}else{
return false;
}
});
//给相印的楼层a设置current,取消其他相关的current
// console.log(top);
var currentlink = menu.find(".current");
if(currentId && currentlink.attr("href") != currentId){
currentlink.removeClass("current");
menu.find("[href="+currentId+"]").addClass("current");
}
});
});
*/
</script>
<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">
<h1>1F 女装</h1>
<ul>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h1>2F 男装</h1>
<ul>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h1>3F 母婴</h1>
<ul>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
</ul>
</div>
刚换了下好像css有问题，具体哪个还没测。。。
改为这个
#menu ul li a.current