Crash54Fox Crash54Fox - 3 months ago 8
CSS Question

scrollTop help, Display image only after 600px has been passed once

So imagine that you want to display a red block when the user scrolls down 600px, and when the user scrolls above 600px you want to display a blue box. That's fine; however, you only want to display the blue box, after the red box has been displayed once/or rather, after the user has scrolled passed 600px once. The obvious thing to do would be to display the red block when the "scrollTop" is greater than (>) 600px, and display the blue block when the "scrollTop" is less than (<) 600px; however, doing this displays the blue block as soon as "scrollTop" reaches 1px, since technically, scrollTop < 600px includes every pixel under 600.

So I need to display the blue block, only after the red block has been displayed once/600 px has been passed once.

jQuery:

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
$("#square").css("background-image", "url(images/comp_rel/red_block.gif)");
}
else {
$("#square").css("background-image", "url(images/comp_rel/blue_block.gif)");
}
});


In advance, thanks for any help.

Answer

Use this:

var shw = false;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600) {
      shw=true;    
      $("#square").css("background-image", "url(images/comp_rel/red_block.gif)");

    }
  else {
     if(shw)
         $("#square").css("background-image", "url(images/comp_rel/blue_block.gif)");
    }
});