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

随机推荐

leetcode605
public class Solution { public bool CanPlaceFlowers(int[] flowerbed, int n) { && flowerbed[] ...
BeX5 常见问题解决办法
1.获取当前Activity的名称 Activity activity = ProcessUtils.getActivityInProcessContext(); String activityNam ...
ASP.NET Core应用到Windows Service中
托管到Windows Service中众所周知,ASP.NET Core采用了和传统ASP.NET不同的托管和HTTP处理方式,即把服务器和托管环境完全解耦. ASP.NET Core内置了两个HT ...
subprocess模块和logging模块
主要内容: 一.subprocess模块二.logging模块 1️⃣ subprocess模块三种执行命令的方法 subprocess.run(*popenargs, input=None, ...
EF的左连接查询
在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...
codeforce 462DIV2 C题
题意给出一个只含有1和2的序列,有n个元素,可以选择一段区间进行翻转操作,求再反转后的最大非递减子序列的长度分析太菜了只想出了N^2的做法.序列只有1和2,那么每个非递减子序列都会有一个分界点, ...
wangEditor富文本编辑器
设置好了是这样的, 有一个ID问content的编辑框,方便获取,这里的富文本编辑器的版本是2.2 官方文档说3就不支持textarea了导入一下css 记得css文件夹下应该又3个文件,虽然没有直 ...
如何学习MySQL
转自高手的帖子 1.坚持阅读官方手册,看MySQL书籍作用不会特别大:(挑选跟工作相关的内容优先阅读,例如InnoDB存储引擎,MySQL复制,查询优化) 2.阅读官方手册,同时对阅读的内容做对应的测 ...
Gnu C API使用指南
1)posix_fadvise http://blog.yufeng.info/archives/1917 2)fts系列 http://www.cnblogs.com/patientAndPersi ...
10.LIKE 操作符
LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. LIKE 操作符 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. SQL LIKE 操作符语法 SELECT colum ...

JavaScript定位导航滚动2

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

随机推荐

热门专题