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?

Brandon Gano · Accepted Answer · 2015-02-04 03:31:25Z

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

haxxxton · Accepted Answer · 2015-02-04 03:35:50Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related