我在单页网站中使用onePageNav插件。所以我想在页面滚动时隐藏菜单(#nav)和徽标。为此,我添加了mousewheel插件。我的完整脚本如下所示:
$('#nav').onePageNav({
currentClass: 'current',
//changeHash: true,
scrollSpeed: 750,
scrollOffset: 0,
scrollThreshold: 0.5,
easing: 'swing',
begin: function(){
hideSubmenu();
},
end: function() {
//verificar se item possui submenu e abrí-lo
if($('.current').has('ul')){
$('.current').children('ul').slideDown('slow');
}
if($('.current').find('a').attr('href') == "#section-4"){
$('.sublogo').addClass('sublogo2');
}else{
$('.sublogo').removeClass('sublogo2');
}
if($('.current').find('a').attr('href') == "#section-3"){
$('.current').children().find('li').first().addClass('submenu-current');
}
},
scrollChange: function($currentListItem) {
hideSubmenu();
if($currentListItem.has('ul')){
$('.current').children('ul').slideDown('slow');
}
if($currentListItem.find('a').attr('href') == "#section-4"){
$('.sublogo').addClass('sublogo2');
}else{
$('.sublogo').removeClass('sublogo2');
}
if($currentListItem.find('a').attr('href') == "#section-3"){
if ($('#multimidia-fotos-galeria-wrapper').is(':visible')){
$('.current').children().find('li').first().addClass('submenu-current');
}
}
$("body").mousewheel(function() {
console.log('scroll');
$('.sublogo').fadeOut('fast');
$('#nav').animate({'opacity' : 0}, 200);
clearTimeout($.data(this, 'timer'));
$.data(this, 'timer', setTimeout(function() {
$('#nav').animate({'opacity' : 1}, 200);
if($currentListItem.find('a').attr('href') != "#section-1"){
$('.sublogo').fadeTo('fast', 1);
}
}, 1000));
});
}
});
我无法使用fadeIn()隐藏菜单,因为它干扰了子菜单的幻灯片。
问题是菜单行为很奇怪:当滚动被激活时它变得不可见,但是再次看到它需要时间。