There are 2 images of how to make it so that it is hidden in turn when scrolling down by 100px.

$(window).scroll(function() { if ($(this).scrollTop()>100) { $('img').eq(0).fadeOut(); } else { $('img').eq(0).fadeIn(); } }); 
 body { height: 2000px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://www.gravatar.com/avatar/5ba9dd877c8a4bc5995b2101908ae648/?default=&s=80" width="200"> <br> <img src="http://www.logospike.com/wp-content/uploads/2015/11/As_Logo_08.png" width="200">

  • What does "take turns" mean? Only one is used, which seems to be correctly hidden. - user207618 pm
  • That is, when scrolling by 100px, the first image is hidden by another 100px two image. - Sauron
  • Well, do 2 if - 100 and 200 offset. - user207618
  • And think if there will be 100 images on everyone to change all this? - Sauron
  • The question specifically asked - 2. If "there are N images" - this is another matter. Divide the current scroll by 100, take the whole - this will be the sequence number of the image. - user207618

0