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; } }*/
