1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title>网页定位导航效果</title>
  6.   <style type="text/css">
  7.     *{
  8.       margin: 0;
  9.       padding: 0;
  10.     }
  11.     body{
  12.       font-size: 12px;
  13.       line-height: 1.7;
  14.     }
  15.     li{
  16.       list-style: none;
  17.     }
  18.     #content{
  19.       width: 800px;
  20.       margin: 0 auto;
  21.       padding: 20px;
  22.     }
  23.     #content h1{
  24.       color: #0088bb;
  25.     }
  26.     #content .item{
  27.       padding: 20px;
  28.       margin-bottom: 20px;
  29.       border: 1px dotted #0088bb;
  30.     }
  31.     #content .item h2{
  32.       font-size: 12px;
  33.       font-weight: bold;
  34.       border-bottom: 2px solid #0088bb;
  35.       margin-bottom: 10px;
  36.     }
  37.     #content .item li{
  38.       display: inline;
  39.       margin-left:10px ;
  40.     }
  41.     #content .item li a img{
  42.       width: 230px;
  43.       height: 230px;
  44.       border: none;
  45.     }
  46.     #menu{
  47.       position: fixed;
  48.       top: 100px;
  49.       left: 50%;
  50.       margin-left: 400px;
  51.       width: 80px;
  52.     }
  53.     #menu ul li a{
  54.       display: block;
  55.       margin: 5px 0;
  56.       font-size: 14px;
  57.       font-weight: bold;
  58.       color: #333;
  59.       width: 80px;
  60.       height: 50px;
  61.       line-height: 50px;
  62.       text-align: center;
  63.       text-decoration: none;
  64.     }
  65.     #menu ul li a:hover{
  66.       color: #fff;
  67.       background: #0088bb;
  68.     }
  69.     #menu ul li .current{
  70.       color: #fff;
  71.       background: #0088bb;
  72.     }
  73.   </style>
  74.   <script type="text/javascript">
  75.     window.onload = function(){
  76.       window.onscroll=function(){
  77.         var top = document.documentElement.scrollTop || document.body.scrollTop;
  78.         var menus = document.getElementById("menu").getElementsByTagName("a");
  79.         var items=document.getElementById("content").getElementsByClassName("item");
  80.  
  81.         var currentId="";
  82.         for(var i=0;i<items.length;i++){
  83.           var _item=items[i];
  84.           var _itemTop = _item.offsetTop;
  85.           if(top>_itemTop - 200){
  86.             currentId=_item.id;
  87.           }else{
  88.             break;
  89.           }
  90.         }
  91.         if(currentId!=""){
  92.           //给正确的menu下的a元素class赋值
  93.           for(var j=0;j<menus.length;j++){
  94.             var _menu=menus[j];
  95.             var _href=_menu.href.split("#");//因为只通过href获取的链接为一长串链接，需要通过#分成数组
  96.             if(_href[_href.length-1]!=currentId){
  97.               _menu.className = "";
  98.             }else{
  99.               _menu.className = " current";
  100.             }
  101.           }
  102.         }
  103.       }
  104.     }
  105.   </script>
  106. </head>
  107. <body>
  108. <div id="menu">
  109.   <ul>
  110.     <li><a href="#item1" class="current">1F 男装</a></li>
  111.     <li><a href="#item2">2F 女装</a></li>
  112.     <li><a href="#item3">3F 美妆</a></li>
  113.     <li><a href="#item4">4F 数码</a></li>
  114.     <li><a href="#item5">5F 母婴</a></li>
  115.   </ul>
  116. </div>
  117. <div id="content">
  118.   <div id="item1" class="item">
  119.     <h2>1F 男装</h2>
  120.     <ul>
  121.       <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>
  122.       <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>
  123.       <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>
  124.       <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>
  125.       <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>
  126.       <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>
  127.       <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>
  128.       <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>
  129.       <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>
  130.     </ul>
  131.   </div>
  132.   <div id="item2" class="item">
  133.     <h2>2F 女装</h2>
  134.     <ul>
  135.       <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>
  136.       <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>
  137.       <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>
  138.       <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>
  139.       <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>
  140.       <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>
  141.       <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>
  142.       <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>
  143.       <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>
  144.     </ul>
  145.   </div>
  146.   <div id="item3" class="item">
  147.     <h2>3F 美妆</h2>
  148.     <ul>
  149.       <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>
  150.       <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>
  151.       <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>
  152.       <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>
  153.       <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>
  154.       <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>
  155.       <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>
  156.       <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>
  157.       <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>
  158.     </ul>
  159.   </div>
  160.   <div id="item4" class="item">
  161.     <h2>4F 数码</h2>
  162.     <ul>
  163.       <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>
  164.       <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>
  165.       <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>
  166.       <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>
  167.       <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>
  168.       <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>
  169.       <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>
  170.       <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>
  171.       <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>
  172.     </ul>
  173.   </div>
  174.   <div id="item5" class="item">
  175.     <h2>5F 母婴</h2>
  176.     <ul>
  177.       <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>
  178.       <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>
  179.       <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>
  180.       <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>
  181.       <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>
  182.       <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>
  183.       <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>
  184.       <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>
  185.       <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>
  186.     </ul>
  187.   </div>
  188. </div>
  189.  
  190. <p>原链接：http://www.jb51.net/article/107739.htm</p>
  191. </body>
  192. </html>

效果图：

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

  1. jQuery定位导航滚动3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery.nav.js定位导航滚动插件

    jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...

  3. Javascript实现导航锚点滚动效果实例

    本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...

  4. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  5. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  6. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  7. 慕课网中网页定位导航中js相关问题总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

  9. css3圆环百分比，菜单栏定位导航

    前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

随机推荐

  1. 虚拟机如何设置外网ip

    实例: 在数据中心机房的一台服务器上安装虚拟机,并在该虚拟机上安装一个操作系统.给该虚拟机配置公网IP,让外网能直接访问到该虚拟上的应用. 这个问题最初觉得简单,不就是桥接嘛,要只让其上网NAT就可以 ...

  2. 黑客工具包ShadowBrokers浅析

    臭名昭著的方程式组织工具包再次被公开,TheShadowBrokers 在 steemit.com博客上提供了相关消息. 本次被公开的工具包大小为117.9MB,包含23 个黑客工具,其中部分文件显示 ...

  3. AE插件之SKYBOX CONVERTER

    AE插件之SKYBOX CONVERTER AE插件SKYBOX CONVERTER的主要作用是开发全景视频或者制作全景图片时,对添加的字幕.图片进行扭曲. 下载目录:http://www.gfxca ...

  4. Java中包、类、方法、属性、常量的命名规则

    1:包(package):用于将完成不同功能的类分门别类,放在不同的目录(包)下,包的命名规则:将公司域名反转作为包名.比如www.baidu.com 对于包名:每个字母都需要小写.比如:com.ba ...

  5. Reading RxJava Marble Diagrams

    ------>表示一个Observable(承时间推移,由左入右,左边item先发射) ------>上面的图形,表示这个Observable发射的item ------>上的的|( ...

  6. java基础之多线程五：实现Runnable的原理

    实现Runnable接口的原理. 背景: 多线程的第一种实现方式是::继承Thread类, 因为我们自定义的类(MyThread)是Thread类的子类, 所以MyThread类的对象调用start( ...

  7. AJAX省市县三级联动的实现

    省市县数据 本例子中省市县数据保存在MySQL数据库中,部分数据截图如下: 从数据库中读取数据 导入需要的jar包 连接池配置文件 <c3p0-config> <!-- 默认配置,如 ...

  8. mfs教程(一)

    对于mfs文件系统也用了半年了,确实不错,最近又翻译了作者的三篇文章,再此一同发上,希望对大家有所帮助.不足之处还请指出,以便完善,谢谢! 感谢网友nonamexz做了精美的pdf文档 MFS文件系统 ...

  9. 2014年：Linux和开源的福祸之年

    (1)Heartbleed漏洞 Heartbleed漏洞,是今年开源软件曝出的最大糗事.Heartbleed漏洞是OpenSSL的重大漏洞,这项严重缺陷(CVE-2014-0160)的产生是由于未能在 ...

  10. grid search 超参数寻优

    http://scikit-learn.org/stable/modules/grid_search.html 1. 超参数寻优方法 gridsearchCV 和  RandomizedSearchC ...