jquery - 滚动时隐藏和再次显示的菜单

Question

当您单击它时，我试图隐藏菜单。当您单击菜单时，它会滑到侧面的特定部分（单页网站）。我喜欢在向下/向上滚动时隐藏菜单，并在到达页面上的点或停止滚动时再次显示。

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

我也尝试使用 slideUp 和 slideDown 而不是 fadeOut/In

这是有效的，但不是我的想法。

• 有没有办法同时滑动和淡出？
• 如何在滚动期间隐藏菜单并在停止滚动时显示？（也许是教程或其他东西）

tnx

Answer 1

Is there a way to slide and fade at the same time?

Probably you should use .animate(). Here is the reference. In your case it should look something like this:

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

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

How to hide the menu during scroll and showing when you stop scrolling? (maybe a tutorial or something)

To track scrolling you can use .scroll(). Check it here. It triggers multiple times during scrolling, so I would recommend to make a timeout for e.g. 1 second to show the menu. Here is an example:

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); 
});