JavaScript定位导航滚动2

<!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">

  <div id="item1" class="item">

    <h2>1F 男装</h2>

    <ul>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

    </ul>

  </div>

  <div id="item2" class="item">

    <h2>2F 女装</h2>

    <ul>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

    </ul>

  </div>

  <div id="item3" class="item">

    <h2>3F 美妆</h2>

    <ul>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

    </ul>

  </div>

  <div id="item4" class="item">

    <h2>4F 数码</h2>

    <ul>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

    </ul>

  </div>

  <div id="item5" class="item">

    <h2>5F 母婴</h2>

    <ul>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

      <li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>

    </ul>

  </div>

</div>

<p>原链接：http://www.jb51.net/article/107739.htm</p>

</body>

</html>

效果图：

JavaScript定位导航滚动2的更多相关文章

jQuery定位导航滚动3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jquery.nav.js定位导航滚动插件
jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...
Javascript实现导航锚点滚动效果实例
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...
JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

随机推荐

JavaWeb---总结(十九)Session机制
一.术语session session,中文经常翻译为会话,其本来的含义是指有始有终的一系列动作/消息,比如打电话时从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个session.有时候我们可 ...
CentOS yum 安装RabbitMQ
最近在做机器学习的任务系统,任务模块使用了消息对联,比较快速的搭建方法: 1.安装erlang 下载rpm仓库:wget http://packages.erlang-solutions.com/er ...
02-26C#三级省市区ajax联动控件,利用UpdatePanel，以及页面取值
第一步:设置界面 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PCAC ...
【转载】用原生JS和html5进行视频截图并保存到本地
支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...
Codeforce 1004C
Description Since Sonya is interested in robotics too, she decided to construct robots that will rea ...
Linux的基本指令--
VIM简介: Vi有三种基本工作模式 1.命令模式 2.文本输入模式 3. 末行模式 VIM基本操作: 一 . 进入插入模式: i: 插入光标前一个字符 I: 插入行首 a: 插入光标后一个字符 A ...
SQL Server误区30日谈第26天 SQL Server中存在真正的“事务嵌套”
误区 #26: SQL Server中存在真正的“事务嵌套”错误嵌套事务可不会像其语法表现的那样看起来允许事务嵌套.我真不知道为什么有人会这样写代码,我唯一能够想到的就是某个哥们对SQL Serve ...
SpringMVC第二天
SpringMVC第二天框架课程 1. 课程计划 1.高级参数绑定 a) 数组类型的参数绑定 b) List类型的绑定 2.@RequestMapping注解的使用 3.Controller方法 ...
linux安全关机脚本
linux安全关机脚本在断电4分钟后判断关键目的:在断电以后服务器连接UPS,UPS最多只能支持5分钟也会没电,所以在这里做个判断,如果断电4分钟后,市电还没来就关机. 以下两个设备为两个下路由器 ...
Cookie的跨域问题
被误解的HttpCookie.Domain属性有人说可以利用HttpCookie.Domain属性实现跨域访问,假如在A站(A.com)中写B站(B.com)的cookie,如下所示这其实是错误的 ...

JavaScript定位导航滚动2

JavaScript定位导航滚动2的更多相关文章

随机推荐

热门专题