14.仿京東右側邊導航欄
阿新 • • 發佈：2018-10-03
none left stop mage head nim 圖書 insert ade
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.3.1.js"></script> <style> *{ margin:0;padding:0; } ul{list-style: none;} .top,.f1,.f2,.f3,.f4,.f5,.f6,.f7,.f8,.bottom{ width: 1210px; margin: 0 auto; } .subnav{ display: none; position: fixed; top: 150px; right: 10px; width: 38px; height: 360px; } .subnav li{ height: 36px; border: 1px solid #DEDEDE; margin-bottom: 5px; font-size: 0; background: url("bg.png") no-repeat; } .subnav li:hover,.subnav li.current,.subnav div{ border: 1px solid #ED5759; background: #FDEEEE; padding-left: 6px; padding-top: 2px; height: 34px; cursor: pointer; color: #ED5759; font-size: 12px; } .subnav div{ padding-top: 10px; height: 26px; } </style> <script> $(function () { var num=0; var top=0; var arr = ["家電通訊", "電腦數碼", "服飾鞋包", "美容珠寶", "居家生活", "母嬰玩具", "食品保健", "圖書音像"] $("<ul></ul>").insertBefore($(".back")); for(var i=0;i<arr.length;i++){ $(".subnav ul").append("<li></li>"); } $(".subnav li").each(function (index,ele) { $(ele).html(arr[index]); num = index*55; $(ele).css("background-position","0 -"+num+"px"); }) //鼠標滾動 $(window).scroll(function () { top = $(document).scrollTop()+50; if(top>=$(".f8").offset().top){ $(".subnav li:eq(7)").addClass("current").siblings().removeClass(); }else if(top>=$(".f7").offset().top){ $(".subnav li:eq(6)").addClass("current").siblings().removeClass(); }else if(top>=$(".f6").offset().top){ $(".subnav li:eq(5)").addClass("current").siblings().removeClass(); }else if(top>=$(".f5").offset().top){ $(".subnav li:eq(4)").addClass("current").siblings().removeClass(); }else if(top>=$(".f4").offset().top){ $(".subnav li:eq(3)").addClass("current").siblings().removeClass(); }else if(top>=$(".f3").offset().top){ $(".subnav li:eq(2)").addClass("current").siblings().removeClass(); }else if(top>=$(".f2").offset().top){ $(".subnav li:eq(1)").addClass("current").siblings().removeClass(); }else if(top>=$(".f1").offset().top){ $(".subnav li:eq(0)").addClass("current").siblings().removeClass(); } else if(top>50){ $(".subnav").fadeIn(); } else { $(".subnav").fadeOut(); } }) //鼠標點擊右側導航欄時 $(".subnav li").click(function () { $("html,body").stop().animate({ // 給具有相同效果的元素添加 共同的樣式 jd "scrollTop" : $(".jd").eq($(this).index()).offset().top },1000); }); //點擊返回 $(".back").click(function () { $("html,body").animate({"scrollTop":0},300); }); }) </script> </head> <body> <div class="top"> <img src="top.png" alt="" /> </div> <div class="jd f1"> <img src="f1.png" alt="" /> </div> <div class="jd f2"> <img src="f2.png" alt="" /> </div> <div class="jd f3"> <img src="f3.png" alt="" /> </div> <div class="jd f4"> <img src="f4.png" alt="" /> </div> <div class="jd f5"> <img src="f5.png" alt="" /> </div> <div class="jd f6"> <img src="f6.png" alt="" /> </div> <div class="jd f7"> <img src="f7.png" alt="" /> </div> <div class="jd f8"> <img src="f8.png" alt="" /> </div> <div class="bottom"> <img src="bottom.png" alt="" /> </div> <div class="subnav"> <div class="back">返回</div> </div> </body> </html>
14.仿京東右側邊導航欄