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

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电商网站常用的楼层导航效果相关的知识，希望对你有一定的参考价值。

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

<!DOCTYPE html>

<html>

<head>

<style>

*{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;}

</style>

$(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();*/

});

</script>

</head>

<body>

<div class="header">header</div>

</div>

<div class="footer">footer</div>

</div>

<div>

</ul>

</div>

</body>

</html>

本文出自 “11996687” 博客，请务必保留此出处http://12006687.blog.51cto.com/11996687/1862373

以上是关于电商网站常用的楼层导航效果的主要内容，如果未能解决你的问题，请参考以下文章

scroll()和scrollTop()方法——实现电商网站中的电梯导航