直接上代码
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>爱淘气购物网－JQuery网页定位导航特效</title> ???<style> ???/*All tag*/ ???html, ???body, ???div, ???ul, ???li, ???img, ???h1, ???h2 { ???????margin: 0; ???????padding: 0; ???} ???ul { ???????list-style: none; ???} ???a { ???????text-decoration: none; ???????color: #333; ???} ???/*menu*/ ???#menu { ???????position: fixed; ???????top: 100px; ???????left: 50%; ???????margin-left: 400px; ???} ???#menu>li>a { ???????display: block; ???????padding: 10px 15px; ???????height: 30px; ???????line-height: 30px; ???????font-size: 14px; ???????font-weight: bold; ???????margin: 5px 0; ???} ???#menu>li>a:hover, ???#menu>li>a.current { ???????color: #fff; ???????background-color: #0088bb; ???} ???/*content*/ ???#content { ???????width: 800px; ???????margin: 30px auto; ???} ???h1 { ???????color: #0088bb; ???????font-size: 30px; ???????margin-bottom: 10px; ???} ???.item { ???????border: 1px dotted #0088bb; ???????padding: 20px; ???????margin-bottom: 20px; ???} ???.item>h2 { ???????font-size: 16px; ???????padding-bottom: 5px; ???????border-bottom: 2px solid #0088bb; ???????margin-bottom: 10px; ???} ???.item-list>li { ???????display: inline-block; ???????margin-right: 10px; ???} ???.item-list>li>a>img { ???????width: 230px; ???????height: 230px; ???????border: none; ???} ???/* IE6 hack*/ ???* html, ???* html body { ???????background-image: url(about:blank); ???????background-attachment: fixed; ???} ???* html #menu { ???????/*position: fixed*/ ???????position: absolute; ???????top: expression((e=document.documentElement.scrollTop ? e: document.body.scrollTop) + 100 + ‘px‘); ???} ???</style></head><body> ???<ul id="menu"> ???????<li><a class="current" href="#item1">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 id="content"> ???????<h1>爱淘气购物网</h1> ???????<div id="item1" class="item"> ???????????<h2>1F 男装</h2> ???????????<ul class="item-list"> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p1.qhimgs4.com/dmfd/160_90_/t01a8d3c891c7c3e202.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????</ul> ???????</div> ???????<div id="item2" class="item"> ???????????<h2>2F 女装</h2> ???????????<ul class="item-list"> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p2.qhimgs4.com/dmfd/160_90_/t01c5e14034226e1d97.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????</ul> ???????</div> ???????<div id="item3" class="item"> ???????????<h2>3F 美妆</h2> ???????????<ul class="item-list"> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t017b1f5993c08af904.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????</ul> ???????</div> ???????<div id="item4" class="item"> ???????????<h2>4F 数码</h2> ???????????<ul class="item-list"> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p0.qhimgs4.com/dmfd/160_90_/t014922d8477716f299.jpg?size=640x400" alt="商品图片"></a> ???????????????</li> ???????????</ul> ???????</div> ???????<div id="item5" class="item"> ???????????<h2>5F 母婴</h2> ???????????<ul class="item-list"> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????????<li> ???????????????????<a href="#"><img src="http://p4.qhimg.com/dmfd/160_90_/t0100eb94d000a1b3c9.jpg" alt="商品图片"></a> ???????????????</li> ???????????</ul> ???????</div> ???????<div style="width: 100%;height: 1000px;"></div> ???</div> ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ??????<script> ???//定义getByClassName函数，让函数实现根据className获取对象并返回 ???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; ???} ???//定义hasClass函数，确认对象是否包含对应的class ???function hasClass(obj, cls) { ???????return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); ???} ???//定义removeClass函数，让函数实现删除对象的class ????function removeClass(obj, cls) { ???????if (hasClass(obj, cls)) { ???????????//remove ???????????var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); ???????????obj.className = obj.className.replace(reg, ""); ???????} ???} ???//定义addClass函数，让函数实现给对象增加class ????function addClass(obj, cls) { ???????if (!hasClass(obj, cls)) { ???????????obj.className += " " + cls; ???????} ???} ???//页面加载完毕执行以下函数 ???window.onload = function() { ???????//页面滚动时，执行以下函数 ???????window.onscroll = function() { ???????????var top = 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) { ???????????????????currentId = _item.id; ???????????????} else { ???????????????????break; ???????????????} ???????????} ???????????//给正确的menu下的a元素class赋值current ???????????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></body></html>js实现滚动定位
原文地址：https://www.cnblogs.com/chenmiaosong/p/8413134.html