Меню, чтобы скрыть и показать снова при прокрутке

Question

Я пытаюсь скрыть меню, когда вы нажимаете на него. Когда вы нажимаете на меню, оно перемещается к определенной части стороны (один веб-сайт). Мне нравится скрывать меню, когда оно прокручивается вверх/вверх и снова отображается, когда оно достигает точки на странице или когда вы прекращаете прокрутку.

$('.hoofdnav ul li a').click(function() { 
    $('header.HoofdNav').fadeOut('slow', function() { 
     setTimeout(showMenu, 1000); 
    }); 
}); 
function showMenu() { 
     $('header.HoofdNav').fadeIn('slow'); 
}; 

Я также попытался с помощью slideUp и slideDown вместо FADEOUT/В

Это работает, но не так, как я имею в виду.

• Есть ли способ скользить и исчезать в одно и то же время?
• Как скрыть меню во время прокрутки и показывая, когда вы прекращаете прокрутку? (Возможно, учебник или что-то)

Того

Answer 1

Есть ли способ, чтобы скользить и исчезают в то же время?

Возможно, вы должны использовать .animate(). Here является ссылкой. В вашем случае это должно выглядеть примерно так:

function hideMenu(){ 
$('header.HoofdNav').stop().animate({ 
    opacity: 0, 
    width: 0 
}); 
} 

function showMenu(){ 
$('header.HoofdNav').stop().animate({ 
    opacity: 1, 
    width: '100%' 
}); 
} 

Как скрыть меню во время прокрутки и показывать, когда вы останавливаетесь прокрутки? (возможно, учебник или что-то еще)

Для отслеживания прокрутки вы можете использовать .scroll(). Проверьте это here. Он запускается несколько раз во время прокрутки, поэтому я рекомендую сделать тайм-аут, например. 1 секунда, чтобы отобразить меню. Вот пример:

var timeout = false, afterScrollingWait = 1000; // here 1000 is time in milliseconds, play with it to make it the best for your app 
$(document).scroll(function(){ 
hideMenu(); 
if (timeout) clearTimeout(timeout); 
setTimeout(showMenu, afterScrollingWait); 
});