jquery+原生的javascript实现网站右侧导航定位–来自慕课课程
- 2020 年 2 月 18 日
- 笔记
/** * @author xiaohejun * Man Always Remember Love Because of Romance Only. * */
先看效果
-demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物网站</title> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script src="js/jquery-3.2.1.js" rel="script"></script> <script src="js/demo.js" rel="script"></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="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> <li><a href="#"><img src="images/1.png" alt="1"></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F 女装</h2> <ul> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2.jpg" alt="2"></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F 美妆</h2> <ul> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> <li><a href="#"><img src="images/3.jpg" alt="3"></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F 数码</h2> <ul> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> <li><a href="#"><img src="images/4.png" alt="4"></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F 母婴</h2> <ul> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> <li><a href="#"><img src="images/5.png" alt="5"></a></li> </ul> </div> </div> </body> </html>
##样式 css/demo.css
* { margin:0px; padding: 0px; } body { font-size: 12px; line-height: 1.7; } li { list-style: none; } #content { width: 800px; margin: 0 auto; padding: 20px; } #content h1 { color: red; } #content .item { padding: 20px; margin-bottom: 20px; border: 1px dotted red; } #content .item h2 { font-size: 16px; font-weight: bold; border-bottom: 2px solid red; margin-bottom: 10px; } #content .item li{ display: inline; margin-right: 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-decoration: none; text-align:center; } #menu ul li a:hover, #menu ul li a.current{ color: #ffffff; background: red; }
动作操作 js/demo.js
/** * Created by 何军 on 2017/8/7. * 使用jquery */ $(document).ready(function () { // 滚动条发生滚动 $(window).scroll(function () { // 滚动挑距离顶部的距离 var top = $(document).scrollTop(); // 获取menu var menu = $("#menu"); // 获取每一个框 var items = $("#content").find(".item"); var currentId = ""; // 当前的id items.each(function () { // 遍历每一个item var m = $(this); // 取得当前对象 var itemTop = m.offset().top; // 获得当前item的距离顶位置 if(top > itemTop-200){ // 如果用户滚动的距离比当前item的距离顶部位置少200px currentId = "#" + m.attr("id"); // 设置currentId 为当前id } else { return false; // 过头了。直接返回false退出循环 } }); var currentLink = menu.find(".current"); // 找到class是current的导航。初始是item1 if(currentId && currentLink.attr("href") !== currentId){ // 如果currentId不是空并且当前导航的href不是当前的id currentLink.removeClass("current"); // 移走current的Class // 注意此处查找方法的字符串拼接。currentId要用引号 menu.find("[href="" + currentId +""]").addClass("current"); // 找到currentId的导航加上current的class } }); }); /* // 使用原生的js window.onload = function () { window.onscroll = function () { var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop; var menus = document.getElementById("menu").getElementsByTagName("a"); var items = getByClassName(document.getElementById("content"), "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元素current赋值 for (var i = 0; i < menus.length; i++) { var _menu = menus[i]; var _href = _menu.href.split("#"); if (_href[_href.length-1] !== currentId) { console.log(_href[_href.length-1]); removeClass(_menu, "current"); } else { addClass(_menu, "current"); } } } } } function getByClassName(obj,cls) { var elements = obj.getElementsByTagName("*"); var result = []; for (var i=0; i < elements.length; i++) { if(elements[i].className === cls) { result.push(elements[i]); } } return result; } function hasClass(obj, cls) { return obj.className.match(new RegExp("(\s|^)" + cls + "(\s|$)")); } function removeClass(obj, cls) { if (hasClass( obj, cls)) { var reg = new RegExp("(\s|^)" + cls + "(\s|$)"); console.log("cls="); console.log(cls); obj.className = obj.className.replace(reg," "); } } function addClass(obj, cls) { if (!hasClass(obj, cls)) { obj.className += " " + cls; } }*/
