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

有没有办法同时滑动和褪色？

可能你应该使用.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); 
});

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

1 个答案: