滚动时隐藏并再次显示的菜单

Question

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

$('.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

有没有办法同时滑动和淡入淡出？

可能您应该使用.animate() 。 这是参考。 在您的情况下，它应如下所示：

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

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

如何在滚动期间隐藏菜单并在停止滚动时显示？ （也许是教程或其他内容）

要跟踪滚动，可以使用.scroll() 。 在这里检查。 它在滚动过程中会触发多次，所以我建议设置超时时间，例如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); 
});