jQuery京东浮动网站楼层导航代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery京东浮动网站楼层导航代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./jquery-1.7.2.min.js"></script>
<title>jQuery京东浮动网站楼层导航代码</title>
<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();
			}
			
		})

	})

	$(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>

</head>
<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;
	}
</style>
<body>
<div id="box">
	<ul>
		<li>
			<a class="num" href="javascript:;" style="display:none">1F</a>
			<a class="word" href="javascript:;" style="display:block">服装</a>
		</li>
		<li>
			<a class="num" href="javascript:;">2F</a>
			<a class="word" href="javascript:;">美妆</a>
			</li>
		<li>
			<a class="num" href="javascript:;">3F</a>
			<a class="word" href="javascript:;">手机</a>
		</li>
		<li>
			<a class="num" href="javascript:;">4F</a>
			<a class="word" href="javascript:;">家电</a>
			</li>
		<li>
			<a class="num" href="javascript:;">5F</a>
			<a class="word" href="javascript:;">数码</a>
		</li>
		<li>
			<a class="num" href="javascript:;">6F</a>
			<a class="word" href="javascript:;">运动</a>
			</li>
		<li>
			<a class="num" href="javascript:;">7F</a>
			<a class="word" href="javascript:;">居家</a>
		</li>
				<li>
			<a class="num" href="javascript:;">8F</a>
			<a class="word" href="javascript:;">母婴</a>
		</li>
		<li>
			<a class="num" href="javascript:;">9F</a>
			<a class="word" href="javascript:;">食品</a>
		</li>
		<li>
			<a class="num" href="javascript:;">10F</a>
			<a class="word" href="javascript:;">图书</a>
		</li>
		<li class="last">
			<a class="num" href="javascript:;">11F</a>
			<a class="word" href="javascript:;">服务</a>
		</li>
	</ul>
</div>
<img src="./pic.gif" alt="" />
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)