Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现网页定位导航功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一个循环判断当前滚动到的位置,另一个循环遍历导航条判断其 id 是否与滚动到的位置相同
效果如图:
实现代码:
- <!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>
来源: http://www.phperz.com/article/17/0704/326960.html