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

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);

　　}

　　})

})