Cambio de imagen de desplazamiento JS / jQuery

RJ:

Esencialmente estoy tratando de hacer una función básica que películas a través de las imágenes en desplazamiento.

Tengo todo en jsFiddle aquí: https://jsfiddle.net/JUST_RJ/6zb37d94/

$(document).ready(function() {

    $("#c1").fadeIn(0);
    console.log()

    $(window).scroll(function() {
      var pos = $(document).scrollTop();
      if (pos < 200) {
        hideAll("c1");
        $("#c1").fadeIn(0);
      }
      if (pos > 200 && pos < 400) {
        hideAll("c2");
        $("#c2").fadeIn(0);
      }
        if (pos > 400 && pos < 600) {
        hideAll("c3");
        $("#c3").fadeIn(0);
      }


    });

    function hideAll(exceptMe) {
      $(".image").each(function(i) {
        if ($(this).attr("id") == exceptMe) return;
        $(this).fadeOut(0);
      });
    }


});

Ahora mismo tengo que trabajar, aunque yo creo que va a complicarse al agregar más imágenes. Quiero mantener la imagen src enumerados en el html por lo que su fácil de agregar una nueva imagen y también para seleccionar manualmente el tamaño de la imagen.

Im pregunto si la parte JS puede simplificarse para hacer dos cosas ...

1. Obtener la altura de desplazamiento y añadir automáticamente un valor predeterminado (200) de película a la siguiente imagen.

Actualmente la cantidad de desplazamiento para cambiar la imagen tiene que ser añadido manualmente, al igual que ...

• Una vez desplazamiento es de 200 a cambio de imagen 2
• Mostrar imagen 2 a 200> 600
• Una vez desplazamiento es de 600 a cambio de imagen 3
• etc.

Esto haría que cada espectáculo de imagen para un rollo de 200 y luego chasquear a la siguiente imagen manualmente sin tener que añadir la cantidad de desplazamiento y la distancia de la imagen anterior cada vez.

2. ¿Hay una forma en que el código puede ser simplificado por lo que en el js, una nueva imagen no necesita ser añadido con un id cada vez? Tal vez hay una manera en que puede contar la cantidad de imágenes en el html con la clase “imagen” y luego añadir automáticamente un número de identificación que se suma 1 a la Identificación del anterior?

Algo como..

• Contar cantidad de imágenes en HTML con la clase “imagen”
• número de tienda (en este caso 3)
• Crear # c1
• Crear # c2

• Crear c3 #

• Mostrar # C1 para un rollo de 200

• Mostrar # c2 para un desplazamiento de 200
• etc

¡Gracias!

Rkv88 - Kanyan:

Esto es lo que necesitas

https://jsfiddle.net/rkv88/9tqcdp61/

calcular el elemento en el rango de imgSpacesen este ejemplo se utiliza este 200:

"#c" + (Math.round(pos / imgSpace) + 1)