javascript - JS(jQuery) 使div在滚动时不再出现第二次

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:您可以在单击按钮后取消注册滚动监听器。那么你将可见性设置为visible的函数将不再被调用。当然，这仅在您不使用任何其他滚动脚本时才有效。

$(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');
});

fiddle :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;
});

fiddle :https://jsfiddle.net/6dk443zd/

为什么您的代码不起作用:您的解决方案的问题在于您在注册滚动处理程序之前放置了if条件。因此，一旦注册(实际上总是在每个页面加载时)，您实际上对更改后的变量没有执行任何操作。 if 条件需要放置在滚动监听器内，如选项 2 中所述。