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 ...

随机推荐

nandflash裸机程序分析
它包含7个文件: head.S init.c main.c Makefile nand.c nand.lds 我们之前的程序都是在nandflash的前4k放代码,上电后自动拷贝到SRAM中,之后将S ...
IDA Pro 权威指南学习笔记(五) - IDA 主要的数据显示窗口
在默认配置下,IDA(从 6.1 版开始)会在对新二进制文件的初始加载和分析阶段创建 7 个显示窗口 3 个立即可见的窗口分别为 IDA-View 窗口.函数窗口和消息输出窗口可以通过 View - ...
Python多线程-队列
队列就是存东西取东西,多用于多线程中按照顺序对传入的数据按规定的顺序输出 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" ...
leetcode812
class Solution { public: double largestTriangleArea(vector<vector<int>>& points) { d ...
Hadoop IO 特性详解（2）
(本文引用了microheart,ggjucheng的一些资料,在此感谢.charles觉得知识无价,开源共享无价) 这一次我们接着分析文件IO校验的相关代码,看看最底层是如何实现这种大数据集的文件校 ...
OK6410 linux系统遇到的BUG总结
经过一段时间使用OK6410 256M RAM 2G nand Flash碰见了不少问题. 所以特意开本贴一起交流.大家有什么BUG解决的可以跟上本帖.求助的请另开贴.勿跟本帖.谢谢.请谅解!!! 希 ...
【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 2_Linear regression with one variable 单变量线性回归
Lecture2 Linear regression with one variable 单变量线性回归 2.1 模型表示 Model Representation 2.1.1 线性回归 Li ...
JanusGraph : 图和图数据库的简介
JanusGraph:图数据库系统简介图(graph)是<数据结构>课中第一次接触到的一个概念,它是一种用来描述现实世界中个体和个体之间网络关系的数据结构. 为了在计算机中存储图,< ...
Unity3d平台信息设置
[Unity3d平台信息设置] 通过"Edit" -> "Project Settings" -> "Player"菜单选项.打 ...
day18-事务与连接池 2.事务介绍与mysql下事务操作
这么玩真的变了吗?把cmd窗口关闭了看看. 就是固定的套路才行:start transaction->执行SQL->rollback; 执行每一条SQL之前都要start transac ...

JavaScript定位导航滚动2

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

随机推荐

热门专题