Question

我正在使用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重新出现...？

Answer 1

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

 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关闭可能会再次显示的检查。

Answer 2

$('a#message-hide').click(function(e) {
   e.preventDefault(); // Better than returning false
   $('#message').remove(); // Remove the message forever
});

使用此功能，您只需从页面中删除#message元素，当用户滚动到“触发位置”时，它将不再显示。

Answer 3

@Nick Craver答案只有在你想要停止div重新出现时才会起作用，即使在用户关闭div之后也是如此。但是当你滚动下注1000和2000时，你的代码将使div连续淡入。为了停止行为，你可以有一个标志，指示是否显示div并在显示div之前检查标志。

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

3 个答案: