jQuery显示div点击隐藏然后不再显示

Question

我正在使用 jQuery 隐藏页面上的 div:

$(document).ready(function(){   
$('#message').hide();

当页面的某个部分滚动到 View 中时，div 将显示使用

$(window).scroll(function() {

            var top = 0;
            top = $(window).scrollTop();


            if((top >= 1000) && (top < 2000)){

                $('#message').fadeIn('slow');
            }    
            }

我想添加一个关闭按钮，如下所示

$('a#message-hide').click(function() {
$('#message').hide('fast');
return false;

到目前为止一切都很好，但我不明白的是当用户滚动回页面上的触发位置时如何停止 div 重新出现...？

Answer 1

您可以稍微重新排列代码，使其不可绑定(bind)(以不会造成附带损害的方式)，如下所示:

 function checkShowDiv() {
   var top = $(window).scrollTop();
   if(top >= 1000 && top < 2000) {
     $('#message:hidden').fadeIn('slow'); //prevent re-fades with :hidden
   }
 }
 $(window).scroll(checkShowDiv);

然后在你的关闭函数中:

$('a#message-hide').click(function() {
  $(window).unbind('scroll', checkShowDiv);
  $('#message').hide('fast');
  return false;
});

这样做的目的是关闭 <div> ，和 .unbind() 发生在 scroll 上的检查这可能会再次显示。