<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“en”> <head> <meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”> <title>Document</title> <link rel=“stylesheet” href=“index.css”> </head> <body> <div class=“top”> <img src=“img/top1.png” alt=“” /> </div> <div class=“louceng”> <div class=“jd jia”> <img src=“img/jia.png” alt=“” /> </div> <div class=“jd dian”> <img src=“img/dian.png” alt=“” /> </div> <div class=“jd fu”> <img src=“img/fu.png” alt=“” /> </div> <div class=“jd mei”> <img src=“img/mei.png” alt=“” /> </div> </div> <div class=“bottom”> <img src=“img/bottom.png” alt=“” /> </div> <div class=“subnav”> <ul> <li>家电通讯</li> <li>电脑数码</li> <li>服饰精品</li> <li>美容珠宝</li> </ul> <div class=“back”>返回</div> </div> <script src=“lib/jquery-1.12.4.js”></script> <script src=“index2.js”></script> </body> </html> CSS *{ margin:0;padding:0; } ul{list-style: none;} .top,.dian,.jia,.fu,.mei,.bottom{ width: 1210px; margin: 0 auto; } .subnav { position: fixed; width: 38px; height: 200px; top:300px; left:50%; margin-left:605px; display: none; } .subnav li,.back{ height: 36px; border:1px solid #DEDEDE; margin-bottom: 5px; font-size:0; background: url(img/bg.png) no-repeat; } .subnav li:nth-child(1) { background-position: 0px 0px; } .subnav li:nth-child(2) { background-position: 0px -55px; } .subnav li:nth-child(3) { background-position: 0px -110px; } .subnav li:nth-child(4) { background-position: 0px -165px; } .subnav li:hover,.subnav li.current,.back { border:1px solid #ED5759; background: #FDEEEE; / 只有冲突的时候才会出现层叠 / / 背景颜色 背景图片 背景位置 背景平铺 背景固定 / / css 层叠样式表 / font-size:12px; color: #ED5759; padding-left: 6px; padding-top: 2px; height: 34px; cursor: pointer; }

    JS

    var $lis = $(“.subnav ul li”); // 获取第1层距离顶部的高度 var v1 = $(“.jia”).offset().top; // 获取第2层距离顶部的高度 var v2 = $(“.dian”).offset().top; // 获取第3层距离顶部的高度 var v3 = $(“.fu”).offset().top; // 获取第4层距离顶部的高度 var v4 = $(“.mei”).offset().top; // 添加页面滚动事件 $(document).scroll(function () { // 判断卷走的距离是否大于等于第一层距离顶部的高度 // 如果大于让侧边栏导航显示，否则隐藏 var v = $(this).scrollTop(); if (v >= v1) { $(“.subnav”).show(); } else { $(“.subnav”).hide(); } // 在滚动过程中，需要判断处于哪个楼层 // 让对应的导航的 li 标签高亮显示，其他的默认 if (v >= v1) { $lis.eq(0).addClass(“current”).siblings().removeClass(“current”); } if (v >= v2) { $lis.eq(1).addClass(“current”).siblings().removeClass(“current”); } if (v >= v3) { $lis.eq(2).addClass(“current”).siblings().removeClass(“current”); } if (v >= v4) { $lis.eq(3).addClass(“current”).siblings().removeClass(“current”); } }) // 给导航添加点击事件 $lis.click(function () { // 获取用户点击的楼层的下标 var idx = $(this).index(); // 找到对应的楼层，获取这个楼层距离顶部的高度 var value = $(“.louceng .jd”).eq(idx).offset().top; // 给页面添加一个运动效果，运动到指定的楼层位置 $(“html,body”).animate({“scrollTop”: value},500) })