javascript - 在滚动 200px 上显示 div，但在单击时隐藏它

Question

我有一个 div 元素#offer，默认情况下是隐藏的，并且在从顶部滚动 200px 时显示，一旦用户再次向上滚动，该 div 就会被隐藏。

以下代码可以很好地完成此操作:

$(document).scroll(function () {
    var y = $(this).scrollTop();   
    if (y > 100) {
        $('#offer').fadeIn();
    } else {
        $('#offer').fadeOut();
    }
});

我想添加一个选项，只需单击 #hide-now div 即可手动隐藏 div。我尝试使用下面的代码。即使这隐藏了 div #offer，div 也会立即再次显示(因为距顶部的滚动距离超过 200px)。我需要对代码进行哪些调整才能使其正常工作？

$(document).ready(function() {
$("#hide-now").live('click', function () { 
$("#offer").slideUp("slow");
});
}); 

有什么想法可以解决这个问题吗？预先感谢您的帮助。

Answer 1

因此，创建一个 bool 值(例如，show)并在为 scroll 处理程序执行 fadeIn 操作之前检查该 bool 值。

所以，

var show = true;
$(document).scroll(function () {
    var y = $(this).scrollTop();   
    if (y > 100) {
      if(show){
        $('#offer').fadeIn();
      }
    } else {
        $('#offer').fadeOut();
    }
});

然后，如果他们点击，

$(document).ready(function() {
  $("#hide-now").live('click', function () { 
    $("#offer").slideUp("slow");
    show = false;
  });
}); 

与其他方法一样，我建议使用 on 而不是 live。