樓層導航

鼠標滾動到某個樓層，某個樓層的樓層按鈕高亮顯示，點擊左邊的樓層按鈕，頁面直接定位到這個樓層

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