////html部分<div class=\"fixtool\"><ul><li><a>空调</li></a><li><a>冰箱</li></a><li><a>美妆</li></a><li><a>鞋靴</li></a><li><a>服饰</li></a><li><a>零食</li></a></ul></div>//css部分.fixtool{position: fixed; //固定电梯导航right: 50%; //窗口的50%margin-right: 510px;width: 66px;background-color: white;display: none;}.fixtool a{ //给a设置样式display: block;text-align: center;font-size: 15px;height: 30px;padding: 5px 0;font-weight: normal;transition: background-color 1s ease 0s;}.fixtoolhover{ //a覆盖的样式color: white;font-size: 18px;background-color: #ccc;}$(function(){ //jQuery部分//fixtool模块$(window).scroll(function(){ //鼠标滚动时触发函数var scrollTop=$(window).scrollTop();//$(window).scrollTop();//取出当前距页面顶端距离，1300是电梯导航出现位置时距页面顶端距离var j=Math.floor((scrollTop-1300)/270);//1300可以用（\'#id\'）.offset()求出，是目标元素与当前doument顶部的距离，300是当前元素的height,j是根据间隔比作为导航栏li的下标，实现颜色的切换if(scrollTop>1300){$(\'.fixtool\').fadeIn();$(\'.fixtool>ul>li\').eq(j).addClass(\'fixtoolhover\').siblings(\'li\').removeClass(\'fixtoolhover\')}else{$(\'.fixtool\').fadeOut();}$(\'.fixtool>ul>li\').on(\'click\',function(){var idx=$(this).index();window.scrollTo({top:1300+270*idx//window.scrollTo点击各导航块时屏幕跳转到指定位置})})})})
爱站程序员基地
