html电商导航,电商网站常用的楼层导航效果

很多电商网站都使用楼层导航效果来布局，如京东，唯品会等大型网站。那楼层导航效果怎么写了，其实很简单，主要用到鼠标滚动事件和高度的应用。现在我们就来用jquery来写以下。代码是直接copy过来的，因为注释比较多所以看起来有点乱。感兴趣的同学可以下载下面的源码来学习。

楼层导航3

*{margin: 0;padding: 0;}

#container{width: 900px;margin: 0 auto;}

#container>*{width: 100%;}

.header{height: 2000px;background: red;}

.floor{height: 1000px;font:bold 25px/30px "微软雅黑";}

.footer{height: 500px;background: red;}

#nav{width: 100px;position: fixed;left: 20px;bottom:300px;list-style: none;display: none;cursor: pointer;}

#nav li{height: 35px;line-height: 35px;border-bottom: 1px dashed #ccc;text-align: center;position: relative;font-size: 25px;margin-top: 1px;}

#nav li span{position: absolute;display: inline-block;height: 35px;line-height: 35px;width: 100%;text-align: center;left: 0;top: 0;display: none;background: #f00;color: #fff;}

$(function(){

var winHeight = $(window).height(), //获取浏览器可是窗口的盖度

headerHeight = $('.header').height(),  //获取header的高度

onOff = false;    //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动

$(window).on('scroll',function(){

var scTop = $(window).scrollTop();  //获取滚动条的滚动距离

//当楼侧开始出现时显示楼层导航条

if(scTop >= headerHeight - winHeight){

$('#nav').show(400);   //也可以不传参数，传参数表示运动时间

}else{

$('#nav').hide(400);

}

//滚动时切换显示楼层

if(!onOff){

$('.floor').each(function(index,element){

var _top = $(this).offset().top;

//当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示

if(scTop >= _top - winHeight / 2){

//此处添加curr类样式并不是改变显示样式，而是为了标当前所在的楼层

$('#nav>li').eq(index).addClass('curr').children().show()

.end().siblings().removeClass('curr').children().hide();

}

});

}

})

$('#nav>li').hover(function(){

$(this).children().show();

},function(){

//此处用到.not('.curr')来过滤当前楼层，鼠标移开时仍然保持当前的显示样式

$(this).not('.curr').children().hide();

}).on('click',function(){

onOff = true;  //将开关变量onOff置为true

var index = $(this).index(),  //获取当前电机的li的索引

_top = $('.floor').eq(index).offset().top;//获取相对于的楼层到文档顶部的距离

$(this).addClass('curr').children().show().end()

.siblings().removeClass('curr').children().hide();

$('html,body').animate({'scrollTop':_top},400,function(){

onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false

});

//或者也可以用scrollIntoView()方法，只是该方法没有滚动的效果，而是直接跳到浏览器可是窗口的最上面.用法如下：

/*var index = $(this).index();

$('.floor').get(index).scrollIntoView();*/

});

});

header

1F

2F

3F

4F

5F

6F

7F

footer

• 1F1楼
• 2F2楼
• 3F3楼
• 4F4楼
• 5F5楼
• 6F6楼
• 7F7楼