js实现网页定位导航功能


Posted in Javascript onMarch 07, 2017

本文实例为大家分享了js网页定位导航的具体代码,供大家参考,具体内容如下

一个循环判断当前滚动到的位置,另一个循环遍历导航条判断其id是否与滚动到的位置相同

效果如图:

js实现网页定位导航功能

实现代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>地狗购物网--网页定位导航效果</title>
  <style type="text/css">
    *{
      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;
    }
    #content .item h2{
      font-size: 12px;
      font-weight: bold;
      border-bottom: 2px solid #0088bb;
      margin-bottom: 10px;
    }
    #content .item li{
      display: inline;
      margin-left:10px ;
    }
    #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: #333;
      width: 80px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      text-decoration: none;
    }
    #menu ul li a:hover{
      color: #fff;
      background: #0088bb;
    }
    #menu ul li .current{
      color: #fff;
      background: #0088bb;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      window.onscroll=function(){
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        var menus = document.getElementById("menu").getElementsByTagName("a");
        var items=document.getElementById("content").getElementsByClassName("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!=""){
          //给正确的menu下的a元素class赋值
          for(var j=0;j<menus.length;j++){
            var _menu=menus[j];
            var _href=_menu.href.split("#");//因为只通过href获取的链接为一长串链接,需要通过#分成数组
            if(_href[_href.length-1]!=currentId){
              _menu.className = "";
            }else{
              _menu.className = " current";
            }
          }
        }
      }
    }
  </script>
</head>
<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">
    <h2>1F 男装</h2>
    <ul>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item2" class="item">
    <h2>2F 女装</h2>
    <ul>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item3" class="item">
    <h2>3F 美妆</h2>
    <ul>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item4" class="item">
    <h2>4F 数码</h2>
    <ul>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
    </ul>
  </div>
  <div id="item5" class="item">
    <h2>5F 母婴</h2>
    <ul>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
    </ul>
  </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
js放到head中失效的原因与解决方法
Mar 07 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python同步两个文件夹下的内容
2019/08/29 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
C++程序员求职信
2014/05/07 职场文书
公共场所禁烟标语
2014/06/25 职场文书
二年级学生期末评语
2014/12/26 职场文书