jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码。具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
CSS样式如下:
*{
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;
}
html页面布局
- 1F手机
- 2F水果
- 3F零食
- 4F小吃
- Top
- 手机
- 水果
- 零食
- 小吃
总结:
本项目页面结构由两部组成:左边是楼梯导航,右边的楼层主体;
CSS方面要注意的是左边的楼梯导航部分划过相应的条目由数字切换成中文;
js代码中楼层跳转效果的实现依靠楼梯导航条目索引(index)和楼层(index)一一对应。
jquery楼层导航效果
$(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');
}
});
});
总结:
本项目页面结构由两部组成:左边是楼梯导航,右边的楼层主体;
CSS方面要注意的是左边的楼梯导航部分划过相应的条目由数字切换成中文;
js代码中楼层跳转效果的实现依靠楼梯导航条目索引(index)和楼层(index)一一对应。