<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>jQuery防京東浮動網站樓層導航程式碼</title>
<script src="admin/js/jquery-1.8.0.min.js"></script>
<script>
$(function () {
// @ 給視窗加滾動條事件
$(window).scroll(function () {
// 獲得視窗滾動上去的距離
var ling = $(document).scrollTop();
// 在標題欄顯示滾動的距離
document.title = ling;
// 如果滾動距離大於1534的時候讓滾動框出來
if (ling > 1534) {
$('#box').show();
}
if (1534 < ling && ling < 2300) {
// 讓第一層的數字隱藏，文字顯示，讓其他兄弟元素的li數字顯示，文字隱藏
$('#box ul li').eq(0).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(0).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 3020) {
$('#box ul li').eq(1).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(1).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 3595) {
$('#box ul li').eq(2).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(2).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 4170) {
$('#box ul li').eq(3).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(3).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 4885) {
$('#box ul li').eq(4).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(4).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 5460) {
$('#box ul li').eq(5).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(5).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 6035) {
$('#box ul li').eq(6).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(6).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 6645) {
$('#box ul li').eq(7).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(7).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 7360) {
$('#box ul li').eq(8).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(8).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 7905) {
$('#box ul li').eq(9).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(9).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
} else if (ling < 8790) {
$('#box ul li').eq(10).find('.num').hide().siblings('.word').css('display', 'block');
$('#box ul li').eq(10).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();
}
if (ling > 8800 || ling < 1534) {
// $('#box').css('display','none'); // @ 這一句和下一句效果一樣。
// $('#box').hide();
}
})
//樓層點選事件 定位到樓層
$(".word").click(function () {
var id = $(this).attr("data-id");
var h = $("#item-" + id).offset().top;
$('body,html').animate({ scrollTop: h }, 200);
});
})
$(function () {
$('#box ul li').hover(function () {
$(this).find('.num').hide().siblings('.word').css({ 'display': 'block', 'background': '#CB1C39', 'color': 'white' });
}, function () {
$(this).find('.num').css({ 'display': 'block', 'background': 'white', 'color': '#666' }).siblings('.word').hide().css({ 'display': 'none', 'background': '', 'color': '' });
})
})
</script>
<style>
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
li,a{
list-style-type: none;
text-decoration: none;
}
#box{
position: fixed;
left: 30px;
top: 160px;
display: none;
}
#box ul li{
width: 30px;
height: 30px;
line-height: 30px;
border: 1px dotted #666;
text-align: center;
border-bottom:none;
}
#box ul li.last{
border-bottom: 1px dotted #666;
}
#box ul li .num{
color: #666;
/*display: none;*/
}
#box ul li .word{
display: none;
color: #CB1C39;
}
.item {
width: 1000px;
margin: 0 auto 30px auto;
height: 750px;
border:1px solid #808080;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a class="num" href="javascript:;" style="display:none">1F</a><a class="word" href="javascript:;" style="display:block" data-id="0">服裝</a></li>
<li><a class="num" href="javascript:;">2F</a><a class="word" href="javascript:;" data-id="1">美妝</a></li>
<li><a class="num" href="javascript:;">3F</a><a class="word" href="javascript:;" data-id="2">手機</a>
</li><li><a class="num" href="javascript:;">4F</a><a class="word" href="javascript:;" data-id="3">家電</a></li>
<li><a class="num" href="javascript:;">5F</a><a class="word" href="javascript:;" data-id="4">數碼</a></li>
<li><a class="num" href="javascript:;">6F</a><a class="word" href="javascript:;" data-id="5">運動</a></li>
<li><a class="num" href="javascript:;">7F</a><a class="word" href="javascript:;" data-id="6">居家</a></li>
<li><a class="num" href="javascript:;">8F</a><a class="word" href="javascript:;" data-id="7">母嬰</a></li>
<li><a class="num" href="javascript:;">9F</a><a class="word" href="javascript:;" data-id="8">食品</a></li>
<li><a class="num" href="javascript:;">10F</a><a class="word" href="javascript:;" data-id="9">圖書</a></li>
<li class="last"><a class="num" href="javascript:;">11F</a><a class="word" href="javascript:;" data-id="10">服務</a></li>
</ul>
</div>
<div class="item" id="item-0">1</div>
<div class="item" id="item-1">2</div>
<div class="item" id="item-2">3</div>
<div class="item" id="item-3">4</div>
<div class="item" id="item-4">5</div>
<div class="item" id="item-5">6</div>
<div class="item" id="item-6">7</div>
<div class="item" id="item-7">8</div>
<div class="item" id="item-8">9</div>
<div class="item" id="item-9">10</div>
<div class="item" id="item-10">11</div>
</body>
</html>