$(function(){
var flag = true;
// 导航栏的显示与隐藏
// 页面加载后如果满足条件就显示导航栏
toggleTool();
//滚动条滚动如果满足条件就显示导航栏
$(window).scroll(function(){
toggleTool();
})
// 解决刷新后导航栏不显示的问题
function toggleTool(){
if($('.recommend').offset().top <= $(document).scrollTop()){
$('.fixedtool').fadeIn();
}else{
$('.fixedtool').fadeOut();
}
if(flag){
// 滚动时自动切换class
var top = $(document).scrollTop();
$('.floor .w').each(function(i,e){
if(top > $(e).offset().top){
$('.fixedtool li').eq(i).addClass("current").siblings().removeClass();
}
})
}
}
//导航栏单击事件
$('.fixedtool li').click(function(){
flag = false;
// 获取当前元素下标
var index = $(this).index();
var d = $('.floor .w').eq(index).offset().top;
$('body,html').stop().animate({
scrollTop:d+1
},500,function(){
// 点击结束后要开启滚动自动切换class
flag = true;
});
// 选中时更改颜色
$(this).addClass('current').siblings().removeClass('current');
})
})
练习--电梯导航栏
最新推荐文章于 2023-07-06 20:20:08 发布