楼梯式导航 html,jQflowNavigation

楼梯是导航

*{margin: 0px;padding: 0px;}

li{list-style: none;}

#header{text-align: center;width: 1200px;margin: 0 auto;}

#main{width: 1200px;margin: 0 auto;}

.louti{height:800px; text-align: center;margin-top:20px;font-size:30px;color: #000;font-family: Arial}

#footer{text-align: center;width: 1200px;margin: 0 auto;}

#fix_nav{position: fixed;z-index: 5;left: 34px;top:100px;display: none;}

#fix_nav ul li{width: 30px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;border-bottom: 1px dotted #999;position: relative;}

#fix_nav ul li span{display: none;position: absolute;top: 0px;left: 0px;font-size: 12px;width: 30px;height: 30px;}

#fix_nav ul li.hover span{display: block;background: #c81623;color: #fff; }/*鼠标移动上去的样式*/

#fix_nav ul li.hover span.avtive{display: block;background: #c81623;color: #fff;}/*鼠标移动上去并且点击时的样式*/

#fix_nav ul li span.avtive{color: #c81623;display: block;background-color: #fff;}/*鼠标点击时的样式*/

头部

服饰

美妆

手机

家电

数码

运动

居家

母婴

食品

图书

服务

楼层11

页尾

• 1F服饰
• 2F美妆
• 3F手机
• 4F家电
• 5F数码
• 6F运动
• 7F居家
• 8F母婴
• 9F食品
• 10F图书
• 11F服务

$(function(){

//鼠标移动效果

$('#fix_nav ul li').hover(function(){

$(this).addClass('hover');

},function(){

$(this).removeClass('hover');

});

//鼠标点击效果

var mark=1;

$('#fix_nav ul li').click(function(){

$(this).find('span').addClass('avtive');

$(this).siblings().find('span').removeClass('avtive');

});

//点击导航跳转效果

$('#fix_nav ul li').click(function(){

mark = 2;

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

var $divH = $('.louti').eq($index).offset().top;

$('html,body').animate({scrollTop:$divH},500,function(){

mark=1

})

});

//获取浏览器滚动事件

$(window).scroll(function(){

var $top = $(this).scrollTop();//获取滚动条的高度

if(mark==1){

$('#main .louti').each(function(){

$index = $(this).index();

$H = $('#main .louti').eq($index).offset().top;

if($top>=$H){

$('#fix_nav li').eq($index).find('span').addClass('avtive');

$('#fix_nav li').eq($index).siblings().find('span').removeClass('avtive')

}

});

}

//当滚动到一定高度时楼梯式导航消失与显示

var $height = $(window).scrollTop();

var $main_h = $('#main').offset().top;

if($height>$main_h){

$('#fix_nav').fadeIn(600);

}else{

$('#fix_nav').fadeOut(600);

}

})

})