楼层导航

鼠标滚动到某个楼层，某个楼层的楼层按钮高亮显示，点击左边的楼层按钮，页面直接定位到这个楼层

html：

　　<div style="height: 100px;text-align: center" class="head">头部</div>

　　<div class="main">
　　　　<div style="background-color: red;" class="louti">服饰</div>
　　　　<div style="background-color:chartreuse;" class="louti">美妆</div>
　　　　<div style="background-color: indianred;" class="louti">手机</div>
　　　　<div style="background-color: darkgreen;" class="louti">家电</div>
　　　　<div style="background-color: beige;" class="louti">数码</div>
　　　　<div style="background-color: hotpink;" class="louti">运动</div>
　　　　<div style="background-color: #abcdef;" class="louti">居家</div>
　　　　<div style="background-color: lightpink;" class="louti">母婴</div>
　　　　<div style="background-color: aqua;" class="louti">食品</div>
　　　　<div style="background-color: #abcdef;" class="louti">图书</div>
　　</div>

　　<ul>
　　　　<li>1F<span>服饰</span></li>
　　　　<li>2F<span>美妆</span></li>
　　　　<li>3F<span>手机</span></li>
　　　　<li>4F<span>家电</span></li>
　　　　<li>5F<span>数码</span></li>
　　　　<li>6F<span>运动</span></li>
　　　　<li>7F<span>居家</span></li>
　　　　<li>8F<span>母婴</span></li>
　　　　<li>9F<span>食品</span></li>
　　　　<li>10F<span>图书</span></li>
　　</ul>

css:　　

　　* {
　　　　margin:0;
　　　　padding:0;
　　}
　　.main div {
　　　　width:90%;
　　　　height:400px;
　　　　text-align:center;
　　　　margin:10px auto;
　　}
　　li {
　　　　list-style-type:none;
　　　　width:40px;
　　　　height:40px;
　　　　line-height:40px;
　　　　text-align:center;
　　　　border-bottom:1px dashed #aaa;
　　　　position:relative;
　　}
　　li.hover {
　　　　background-color:#c81623;
　　}
　　/*鼠标移动上去后的效果*/
　　li span {
　　　　display:none;
　　　　position:absolute;
　　　　width:40px;
　　　　height:40px;
　　　　text-align:center;
　　}
　　li.hover span {
　　　　display:block;
　　　　top:0;
　　　　left:0;
　　　　background-color:#c81623;
　　　　color:white;
　　}
　　/*鼠标移动上去后的效果*/
　　ul {
　　　　position:fixed;
　　　　left:10px;
　　　　top:100px;
　　　　display:none;
　　}
　　li span.cli {
　　　　display:block;
　　　　top:0;
　　　　left:0;
　　　　background-color:#c81623;
　　　　color:white;
　　}

js:

//鼠标移动上去的事件
　　$(function() {
　　　　$("ul li").hover(function() {
　　　　$(this).addClass("hover");
　　}, function() {
　　　　$(this).removeClass("hover");
　　});

　　var mark = 1;
　　//鼠标点击事件
　　$("ul li").click(function() {
　　　　$(this).find("span").addClass("cli");
　　　　$(this).siblings().find('span').removeClass("cli"); //siblings为找到该li的全部同辈元素；
　　});
　　//鼠标点击跳转效果
　　$("ul li").click(function() {
　　　　mark = 2;
　　　　var index = $(this).index();
　　　　var h = $(".louti").eq(index).offset().top; //offset为获取匹配元素在当前视口的相对偏移，有top和left；
　　　　$('body').animate({
　　　　　　scrollTop: h
　　　　}, 500, function() { //scrollTop为获取匹配元素相对滚动条顶部的偏移。
　　　　　　mark = 1
　　　　})
　　});

　　$(window).scroll(function() { 　　　　var H = $(this).scrollTop(); //获取滚动条的高度 　　　　if (mark == 1) { 　　　　$(".louti").each(function() { 　　　　index = $(this).index(); 　　　　h = $(".louti").eq(index).offset().top; 　　　　if (H >= h) { 　　　　　　$("li").eq(index).find("span").addClass("cli"); 　　　　　　$("li").eq(index).siblings().find("span").removeClass("cli") 　　　　} 　　}); } //当滚动到必定高度时楼梯式导航消失与显示 　　var $height = $(window).scrollTop(); 　　var $main_h = $(".main").offset().top; 　　console.log($height); 　　console.log($main_h); 　　if ($height > $main_h) { 　　　　$("ul").fadeIn(600); 　　} else { 　　　　$("ul").fadeOut(600); 　　} 　　}) })