Change you switch to something like this:
switch (true) {
case (range > 480 && range < 520):
popID = 'popup1';
break;
case (range > 980 && range < 1020):
popID = 'popup2';
break;
}
if (popID) {
$('.popup_block').hide();
$('#' + popID).fadeIn().css({
width: popWidth,
height: popHeight
})
.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
}
Basically, here you compare scrollLeft
against range of values which guarantees that you never skip 500
or 1000
event if you scroll fast. Instead of switch you can also use if-else-if
statement.
You also need to hide previous blocks with $('.popup_block').hide();
.