地狗购物网，网页定位导航特效功能加强版

来源：互联网发布：js 遍历数组 map 编辑：程序博客网时间：2024/04/29 06:08

我在原先的地狗购物网-网页定位导航上做了大幅度的改进：

具体改进有以下几点：

1、原先的地狗购物网通过锚链接实现点击导航的跳转，这样的跳转是瞬发的，没有动画，我封装了menuClick(menus,items)点击导航函数和scrollTo(targetTop)滚动条滚动函数实现了点击导航然后滚动条滚动到相应内容的位置，这个滚动过程通过定时器设置，是有动画的。

2、在滚动条数值与导航样式联动方面，还是原先的写法，通过判断滚动条数值能超过第几个内容(item)的offsetTop-150,然后记录最后超过的item的id并匹配对应的导航，给对应的导航添加高亮样式，不对应的清空样式。

3、在很多情况下，该定位导航起始不一定需要在最顶部，有可能刚开始在下面（用absolute），然后当用户浏览到内容区域时，将导航固定（用fixed），然后再浏览到内容区域结束时，需要取消固定，变为absolute绝对定位

这个过程的px计算，按此公式：

页面元素距离浏览器可视区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度

页面元素距离浏览器可视区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop

4、我们通过点击导航改变滚动条数值，又通过滚动条数值改变导航样式，故点击导航后样式也会改变

具体分析：点击导航后，滚动条数值是对应内容offsetTop-100，而滚动条数值在>对应内容offsetTop-150时会改变对应导航样式，offsetTop-100>offsetTop-150,故此时点击导航后该导航高亮

<!doctype html><html><head><meta charset="UTF-8"><title>地狗购物网-网页定位导航效果</title><style>* {margin: 0;padding: 0;}body {font-size: 12px;line-height: 1.7;}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;transition: all .3s ease-in-out;}#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;}#content .item li a img {width: 230px;height: 230px;border: none;}#menu {position: absolute;top: 715px;left: 50%;margin-left: 420px;width: 50px;}#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;transition: all .3s ease-in-out;}#menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;}h1 {margin-bottom: 100px;}/*/*/*/** html,* html body {background-image: url(about:blank);background-attachment: fixed;}* html #menu {position: absolute;bottom: auto;top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');}*/</style><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head><body><div id="menu"><ul><li><a href="javascript:;" class="current" id="nav-item1">1F 男装</a></li><li><a href="javascript:;" id="nav-item2">2F 女装</a></li><li><a href="javascript:;" id="nav-item3">3F 美妆</a></li><li><a href="javascript:;" id="nav-item4">4F 数码</a></li><li><a href="javascript:;" id="nav-item5">5F 母婴</a></li></ul></div><div id="content"><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1><div id="item1" class="item"><h2>1F 男装</h2><ul><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li><li><a href="#"><img src="1F.jpg" alt="" /></a></li></ul></div><div id="item2" class="item"><h2>2F 女装</h2><ul><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li><li><a href="#"><img src="2F.jpg" alt="" /></a></li></ul></div><div id="item3" class="item"><h2>3F 美妆</h2><ul><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li><li><a href="#"><img src="3F.jpg" alt="" /></a></li></ul></div><div id="item4" class="item"><h2>4F 数码</h2><ul><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li><li><a href="#"><img src="4F.png" alt="" /></a></li></ul></div><div id="item5" class="item"><h2>5F 母婴</h2><ul><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li><li><a href="#"><img src="5F.jpg" alt="" /></a></li></ul></div><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1><h1>地狗购物网</h1></div><script type="text/javascript">window.onload = function() {var menus = document.getElementById("menu").getElementsByTagName('a');var items = getElementsByClassName(document.getElementById("content"), 'item');menuClick(menus, items);}window.onscroll = function() {var menus = document.getElementById("menu").getElementsByTagName('a'); //导航链接数组var items = getElementsByClassName(document.getElementById("content"), 'item'); //内容数组activeMenus(menus, items); //导航高亮与内容滚动关联fixTo();}//点击导航函数function menuClick(menus, items) {for(var i = 0; i < menus.length; i++) { //遍历导航menus[i].index = i;menus[i].onclick = function() {//取得与所点导航对应的内容的offsetTop-100作为滚动条的目标值var targetTop = items[this.index].offsetTop - 100;scrollTo(targetTop);}}}//滚动条滚动函数function scrollTo(targetTop) { //递归调用定时器timer = setTimeout(function() { //只能有一个定时器console.log('目标的位置是：' + targetTop);var top = document.documentElement.scrollTop || document.body.scrollTop; //现在的滚动条数值console.log('此时我的滚动条位置：' + top);console.log('1目前的距离差是：' + (targetTop - top));var ispeed = (targetTop - top) / 3;console.log('2此距离差对应的速度：' + ispeed);if(Math.abs(ispeed) >= 1) {document.documentElement.scrollTop = document.body.scrollTop = top + ispeed;clearTimeout(timer); //只要滚动条在滚动中，就会时刻执行clear操作，防止另一个定时器开启scrollTo(targetTop); //上面定时器已清除，重新调用scrollTo函数} else {clearTimeout(timer); //在ispeed小于1时清除定时器}}, 30)//document.documentElement.scrollTop = document.body.scrollTop = items[this.index].offsetTop - 100;}//导航高亮与内容滚动关联function activeMenus(menus, items) {var top = document.documentElement.scrollTop || document.body.scrollTop; //滚动条离顶部距离var currentId = "";for(var i = 0; i < items.length; i++) {var _itemTop = items[i].offsetTop; //内容的offsetTopif(top >= _itemTop - 150) {currentId = items[i].id; //由滚动条高度匹配到目标内容的id} else {break;}}if(currentId) { //item3,item4等for(var j = 0; j < menus.length; j++) { //在导航数组中搜索与currentId有相同索引的if(menus[j].id != 'nav-' + currentId) { //目标内容id和导航id相差一个'nav-'menus[j].className = "";} else {menus[j].className = "current";}}}}//根据className获取元素function getElementsByClassName(node, classname) {if(node.getElementsByClassName) {//使用现有方法  return node.getElementsByClassName(classname);} else {var result = new Array(); //声明相同类名元素数组  var elems = node.getElementsByTagName('*');for(var i = 0; i < elems.length; i++) {if(elems[i].className.indexOf(classname) != -1) {result[result.length] = elems[i];}}return results;}}//定位导航function fixTo() {var top = document.documentElement.scrollTop || document.body.scrollTop; //滚动条离顶部距离var menu = document.getElementById('menu');if(top < 618) {menu.style.position = 'absolute';menu.style.top = '715px';} else if(top >= 618 && top <= 4374) { //当滚动条大于618，也就是第一个item的offsetTop-100时，让其固定menu.style.position = 'fixed';menu.style.top = '97px'; //715为menu的绝对定位top，715-618=97} else if(top > 4374) { //下限menu.style.position = 'absolute';menu.style.top = '4471px'; //97+4374=4471}}// 页面元素距离浏览器可视区顶端的距离97 =  元素距离文档顶端偏移值715  -   网页被卷起来的高度618// 页面元素距离浏览器可视区顶端的距离 =  DOM元素对象.offsetTop  -  document.documentElement.scrollTop</script></body></html>

0 0