jquery how to disable an scroll event on click of another event

Question

this is the script I have in place to show a popup and then on click disable it. The popup show when scrolling past a certain limit and then stays until the close image is clicked.

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

    $(window).scroll(function(){
      if($(document).scrollTop() > 325){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

This works fine but the problem I have now is that when the close img is clicked and the popup disappears, it re-appears when the user scrolls again.

What is an easy and lightweight way to disable the re-appearance of the popup?

Answer 1

If you no longer need to keep track of scroll events after showing the popup, you should "unbind" your handler. For example:

$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  function handleWindowScroll() {
    if($(document).scrollTop() > 325){
      $(window).off('scroll', handleWindowScroll);
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  }
  $(window).on('scroll', handleWindowScroll);

  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});

Note that object.on('click', handler) is the same as object.click(handler) in jQuery.

If you still need to keep track of the scroll event and the unbind solution won't work, you can use a variable instead:

$(document).ready(function(){
  var popupShown = false;

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  $(window).scroll(function(){
    if(!popupShown && $(document).scrollTop() > 325){
      popupShown = true;
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  });
  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});

Answer 2

you could do this in a number of ways:

1) set a variable that will stop the popup from firing

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();
  var hasClosed = false;

    $(window).scroll(function(){
      if($(document).scrollTop() > 325 && !hasClosed){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        hasClosed = true;
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

2) remove the scroll trigger after the popup has been opened (preferrable)

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();
  var openPopup = function(){
      if($(document).scrollTop() > 325){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
  }

    $(window).on('scroll', openPopup );  
    $("img#close").click(function(){
        $(window).off('scroll', openPopup );
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

The second one works best as it prevents jQuery from triggering the check against scrollTop() after its happened once. Where as the first option will continue to check, but will just not fire because of the false boolean