jquery scrollTop slideDown 无法停止重复

Question

我在 stackoverflow 上搜索了很多帖子，但没有找到我的解决方案。

向下滚动200px后，我想调出一个菜单栏，没问题。 我希望它与 slideDown 一起出现。

问题是在向下滚动到 200px 以下后，每次我再次向下滚动时，slideDown() 再次滑动，我只在第一次向下超过 200px 时让它滑动一次。

这是我的 jQuery 代码:

var lastScrollTop = 0;
delta = 5;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if(Math.abs(lastScrollTop - st) <= delta)
      return;

  //initialisation div caché :
  $('#menu-container-mini').css("display", "none");

  if (st > lastScrollTop){
    // scrolling down :
    console.log('scroll down'+st);
    if(st>200){
      // Scrolling down après 150px
      console.log('scroll down st>150 : '+st);

      // This condition isn't respected
      // Each time I scroll down, the slideDown starts again :


      if($('#menu-container-mini').css('display')=='none')
      {
        $('#menu-container-mini').slideDown('slow').css("display", "block");
      }

    }
  }
  lastScrollTop = st;
});

非常感谢您的帮助!

Answer 1

如果您只想执行一次，您可以创建一个 bool 值并将其初始设置为 false。然后一旦你滚动超过 200 像素，检查你的变量是否为 false，如果是，调用你的 slideDown() 然后将你的变量设置为 true。

然后，如果您愿意，可以在向上滚动到足够高时将变量设置回 false

*编辑:我发现了错误，每次滚动你都在调用

//initialisation div caché :
 $('#menu-container-mini').css("display", "none");

这就是您的弹出窗口消失的原因。将该行移至 $(window).scroll 函数上方