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中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
javascript二维数组转置实例
Jan 22 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
浅谈JavaScript闭包
Apr 09 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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中通过curl smtp发送邮件
2012/06/05 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
Angular的$http与$location
2016/12/26 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
出纳的岗位职责
2013/11/09 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技