标签：document move 女装 定位 ++ 实现 items var scrolltop
html body 代码
<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>
<span id="span"></span>
</div>
<div id="content">
<h1>地狗购物网</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</body>
js代码
window.onload = function () { window.onscroll = function () { //滚动到一定高度的 距离顶部的距离 var top = document.documentElement.scrollTop || document.body.scrollTop; document.getElementById("span").innerHTML = top; // alert(document.getElementById("item2").offsetTop); var items = document.getElementsByClassName("item"); var iditem = ""; for (var i = 0; i < items.length; i++) { if (top > items[i].offsetTop-100) { iditem = "#"+items[i].getAttribute("id"); } else { break;} } var menuitems = document.getElementById("menu").getElementsByTagName("a"); var aa = ""; for (var i = 0; i < menuitems.length; i++) { if (menuitems[i].getAttribute("href") == iditem) { menuitems[i].setAttribute("class", "current"); } else { menuitems[i].removeAttribute("class"); } } } }
标签：document move 女装 定位 ++ 实现 items var scrolltop
原文地址：http://www.cnblogs.com/zhangwei99com/p/7004442.html
