我在我的单页网站中使用 onePageNav 插件。所以我想在页面滚动时隐藏菜单(#nav)和徽标。为此,我添加了鼠标滚轮插件。我的完整脚本如下所示:
$('#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() 来隐藏菜单,因为它干扰了子菜单的滑动。
问题是菜单行为很奇怪:当滚动被激活时它变得不可见,但它需要一些时间才能再次变得可见。