Question

我只学习JS（jQuery），所以我有一个问题。当用户将页面滚动到底部并且我想添加关闭按钮时，我编写了脚本，其中显示了div，因此用户点击它并且当用户再次滚动到底部时它不会出现。所以：

<script>
  $(window).scroll(function() {
    if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
      $('#div-name').css('visibility', 'visible')
    }
  };

  $('#close-button).click(function(){
    $('#div-name').css('visibility', 'hidden')
  });
</script>

非常简单，但我希望永远隐藏的关闭按钮（直到刷新或重新访问）和滚动功能不会第二次显示此div。

所以我想，如果我喜欢这样：

    <script>
     var wasClosed = false;
     if(!wasClosed) {
      $(window).scroll(function() {
       if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
        $('#div-name').css('visibility', 'visible')
       }
      }
     };

     $('#close-button).click(function(){
      wasClosed = true;
      $('#div-name').css('visibility', 'hidden');
     });
    </script>

但是我不明白为什么它不起作用，它在我点击关闭按钮后一次又一次地保持弹出。

Answer 1

仅供参考：您的代码中存在一些语法错误 - 缺少分号和缺少括号。

选项1 ：点击按钮后，您可以取消注册滚动侦听器。然后，根本不再调用将可见性置于可见状态的功能。当然，这只有在您不使用任何其他滚动脚本时才有效。

$(window).scroll(function() {
   if($(window).scrollTop() > 
   ($(document).height() - $(window).height() - 200) ) {
     $('#div-name').css('visibility', 'visible');
   }
});

$('#close-button').click(function(){
  $('#div-name').css('visibility', 'hidden');
  $(window).off('scroll');
});

小提琴：https://jsfiddle.net/kx6fkp7n/

选项2：初始化变量，其中保存状态（如果已经关闭）。按下按钮后，将变量设置为true，并在滚动侦听器中确保通过扩展条件不再发生可见性更改。

var wasClosed = false;
$(window).scroll(function() {
  if(!wasClosed && $(window).scrollTop() > 
     ($(document).height() - $(window).height() - 200) ) {
    $('#div-name').css('visibility', 'visible');
  }
});

$('#close-button').click(function(){
  $('#div-name').css('visibility', 'hidden');
  wasClosed = true;
});

小提琴：https://jsfiddle.net/6dk443zd/

为什么您的代码无效？您的解决方案的问题在于您在注册滚动处理程序之前放置了 if-condition 。因此，一旦它被注册（实际上总是在每个页面加载），你实际上对改变的变量什么都不做。 if条件需要放在滚动侦听器中，如选项2中所述。

JS（jQuery）使div在滚动时不会出现第二次

1 个答案: