Question

I am using jQuery to hide a div on my page:

$(document).ready(function(){   
$('#message').hide();

When a certain part of the page scrolls into view the div shows using

$(window).scroll(function() {

            var top = 0;
            top = $(window).scrollTop();


            if((top >= 1000) && (top < 2000)){

                $('#message').fadeIn('slow');
            }    
            }

I want to add a close button to this as follows

$('a#message-hide').click(function() {
$('#message').hide('fast');
return false;

All good so far but the part I cannot figure out is how to then STOP the div re-appearing when the user scrolls back to the trigger position on the page…?

Answer 1

You can rearrange your code a bit so it’s unbindable (in a way that doesn’t do collateral damage), like this:

 function checkShowDiv() {
   var top = $(window).scrollTop();
   if(top >= 1000 && top < 2000) {
     $('#message:hidden').fadeIn('slow'); //prevent re-fades with :hidden
   }
 }
 $(window).scroll(checkShowDiv);

Then in your close function:

$('a#message-hide').click(function() {
  $(window).unbind('scroll', checkShowDiv);
  $('#message').hide('fast');
  return false;
});

What this does is both close the <div>, and .unbind() the check that happens on scroll that might show it again.