jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航

发布时间:2017-05-04 编辑:小张个人博客 查看次数:6318

jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码。具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

jQuery京东浮动网站楼层导航

CSS样式如下:

<style>
    *{
        margin:0;
        padding:0;
        font-size: 12px;
    }
    #stairsNav{
        position: fixed;
        left: 200px;
        bottom: 15px;
        border: 1px solid #c81623;
        display:block;
    }
    #stairsNav li{
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #c81623;
        list-style: none;
    }
    #stairsNav li .second{
        display: none;
    }
    #stairsNav li.active .first{
        display: none;
    }
    #stairsNav li.active .second{
        display: block;
    }
    #stairsNav li.active,#stairsNav li.last{
        background-color: #c81623;
        color: #fff;
        cursor: pointer;
    }
    #main{
        width:800px;
        margin:0 auto;
        background-color: #ccc;
    }
    #main li.stairs{
        height: 400px;
        background-color: #ff3300;
        color: #fff;
        margin-bottom: 3px;
    }
    #main li span{
        font-size: 16px;
    }
</style>

html页面布局

<!--导般菜单start-->
<ul id="stairsNav">
    <li class="active"><span class="first">1F</span><span class="second">手机</span></li>
    <li><span class="first">2F</span><span class="second">水果</span></li>
    <li><span class="first">3F</span><span class="second">零食</span></li>
    <li><span class="first">4F</span><span class="second">小吃</span></li>
    <li class="last">Top</li>
</ul>
<!--导航菜单end-->
<div style="height: 200px;width: 1303px; border: 1px solid #c81623;"></div>
<!--相应楼层内容stat-->
<ul id="main">
    <li class="stairs"><span>手机</span></li>
    <li class="stairs"><span>水果</span></li>
    <li class="stairs"><span>零食</span></li>
    <li class="stairs"><span>小吃</span></li>
</ul>
<!--相应楼层内容end-->
<div class="footer" style="height: 500px;width: 1303px; border: 1px solid #c81623;">
    <h3>总结:</h3>
    <p>本项目页面结构由两部组成:左边是楼梯导航,右边的楼层主体;</p>
    <p>CSS方面要注意的是左边的楼梯导航部分划过相应的条目由数字切换成中文;</p>
    <p>js代码中楼层跳转效果的实现依靠楼梯导航条目索引(index)和楼层(index)一一对应。</p>
</div>

jquery楼层导航效果

<script src="./jquery1.8.3.js"></script>
<script>
$(function(){
	$('#stairsNav li').not('.last').hover(function(){
		// 鼠标滑入时添加active样式
		$(this).addClass('active');
	},function () {
		// 鼠标移出时移除active样式
		$(this).removeClass('active');
	});
	// 点击返回顶部
	$('.last').on('click',function(){
		$('html,body').animate({
			scrollTop:0
		},1000);
	});
	// 点击楼层跳到对应内容的楼层
	$('#stairsNav li').not('.last').on('click',function () {
		var index = $(this).index(); // 获取元素所在索引
		var height = $('#main li').eq(index).offset().top; // 取得相对于文档的高度
		$('html,body').animate({
			scrollTop:height
		},1000);
	});
	// 楼层导航显示/隐藏
	$(window).scroll(function(){
		var t = $(this).scrollTop(); // 记录滚动条的置位
		var headerHeight = $('#main li').first().offset().top; // 页面顶部的距离
		// 判断楼层导航栏是否满足条件,如果满足条件就显示出来,否则隐藏
		if(t > headerHeight-50){
			$('#stairsNav').fadeIn(); // 元素淡入效果
		}else{
			$('#stairsNav').fadeOut(); // 元素淡出效果
		}
		var obj = $('.stairs');
		obj.each(function () {
			var index = $(this).index();
			var height = obj.eq(index).offset().top - $('.stairs').height() /2;
			// 改变楼层样式
			if(t > height){
				$('#stairsNav li').eq(index).addClass('active').siblings().removeClass('active');
			}
		});
		var lastHeight = $('.footer').offset().top;
		if(t > lastHeight-300){
			$('#stairsNav li').not('.last').removeClass('active');
		}
	});
});
</script>

总结:

本项目页面结构由两部组成:左边是楼梯导航,右边的楼层主体;

CSS方面要注意的是左边的楼梯导航部分划过相应的条目由数字切换成中文;

js代码中楼层跳转效果的实现依靠楼梯导航条目索引(index)和楼层(index)一一对应。

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部