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

【问题标题】：Menu to hide and show again when scrolling滚动时隐藏和再次显示的菜单
【发布时间】：2013-03-20 09:18:28
【问题描述】：

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

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

【问题讨论】：

标签： jquery menu scroll

【解决方案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); 
});

【讨论】：