1

我正在使用 jQuery 在我的页面上隐藏一个 div：

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

当页面的某个部分滚动到视图中时，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 重新出现......？

4

3 回答 3

2

您可以稍微重新排列您的代码，使其不可绑定（以一种不会造成附带损害的方式），如下所示：

 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可能会再次显示它。

于 2010-05-25T11:47:08.033 回答
2 
$('a#message-hide').click(function(e) {
   e.preventDefault(); // Better than returning false
   $('#message').remove(); // Remove the message forever
});

这样，您只需从页面中删除#message 元素，当用户滚动到“触发位置”时，它就不会再次显示。

于 2010-05-25T11:57:50.290 回答
0

@Nick Craver 答案仅在您想阻止 div 重新出现时才有效，即使在用户关闭 div 后也是如此。但是，当您在 1000 和 2000 之间滚动时，您的代码会使 div 连续淡入。要停止该行为，您可以有一个标志来指示 div 是否正在显示，并在显示 div 之前检查该标志。

于 2010-05-25T11:54:13.987 回答