0
  • Tengo varias columnas en html
  • Cuando cargue la página quiero que solo me muestre la primera
  • Cuando el usuario haga scroll muestre la segunda y oculte la primera
  • Si vuelve a dar scroll muestre la tercera y oculte la segunda
  • Así sucesivamente con todas las columnas.

  • Ahora si el usuario da scroll hacia arriba que muestre la columna anterior y vaya ocultando las útltimas (lo contrario a lo anterior)

  • Así sucesivamente hasta llegar a la primera.

¿Alguna idea?, Gracias de antemano.

Esto es lo que estoy creando:

    jQuery(document).ready(function() {
        jQuery('.row2,.row3').hide();
    });
    var cargar = function() {
        var $scrollTop = jQuery(window).scrollTop();
	        if ($scrollTop >= 1) {
	            jQuery('.row1').hide();
	            jQuery('.row2').fadeIn();
	            $scrollTop = 0;
	        }
    }
    jQuery(window).on('scroll', cargar);
<div class="row1">
	<div class="col6">
	    <img src="../img.jpg">
    </div>
    <div class="col6">
        <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
</div>

<div class="row2">
	<div class="col6">
	    <img src="../img.jpg">
    </div>
    <div class="col6">
        <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
</div>

<div class="row3">
	<div class="col6">
	    <img src="../img.jpg">
    </div>
    <div class="col6">
        <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
</div>

1 respuesta 1

0

¿Cual era el fallo?

Como tu lo querías hacer era con el evento del scroll. Pero ese evento solo se ejecuta cuando la barra la lateral (que en CSS es la propiedad overflow) se mueve. Para que se mueva tiene que estar visible.

¿Como funciona esta script?

Ejecuta un evento de la rueda del ratón, he utilizado en mi caso el .addEventListener("wheel") aunque también se podría utilizar el .bind("mousewheel")
Luego para comprobar si esta haciendo scroll hacia arriba o hacia abajo, utilizo el event.deltaY que devolverá 100 si haces scroll hacia abajo o -100 si haces scroll hacia arriba.

He añadido un limitador para que solo se pueda llamar 1 vez simultáneamente al script (por si da futuros fallos de cuando haces scroll rápidamente), también he añadido el delimitador para que se pase de elementos (si estas en el elemento row1 que no pueda ir al elemento row0 o row-1...), tanto máximo como mínimo.

Para identificar el elemento actualmente activo he añadido la clase active un container con el id row_container y a todos los elementos les he añadido la clase row para que sea más fácil acceder al conjunto de todos los elementos

var animando;
jQuery(document).ready(function() {
    jQuery(".row1").addClass("active");
    jQuery('.row2,.row3').hide();
    animando=false;
    
 });
    $("#row_container")[0].addEventListener("wheel",function(event){
      var y=event.deltaY;
      var row_n= parseInt($(".row.active").attr("class").split(" ")[1].substr(-1));
      if(animando==false){
        if(y==-100){
          //Scroll hacia arriba
          if($("#row_container .row").length>row_n){
            animando=true;
            var row_desti="#row_container .row"+(row_n+1);
            $(".row.active").hide();
            console.log(row_desti);
            $(row_desti).fadeIn(function(){
              animando=false;
              $(".row.active").removeClass("active");
              $(row_desti).addClass("active");
            });
          }
        }else if(y==100){
          //Scroll hacia abajo
          if(row_n > 1){
            animando=true;
            var row_desti="#row_container .row"+(row_n-1);
            $(".row.active").hide();
            console.log(row_desti);
            $(row_desti).fadeIn(function(){
              animando=false;
              $(".row.active").removeClass("active");
              $(row_desti).addClass("active");
            });
          }
        }else{
          console.log("Scroll error");
        }
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row_container">
  <div class="row row1">
    <div class="col6">
        <img src="../img.jpg">
      </div>
      <div class="col6">
          <p>Lorem ipsum dolor sit amet, consectetur</p>
      </div>
  </div>

  <div class="row row2">
    <div class="col6">
        <img src="../img.jpg">
      </div>
      <div class="col6">
          <p>gsasdfgasdLorem ipsum dolor sit amet, consectetur</p>
      </div>
  </div>

  <div class="row row3">
    <div class="col6">
        <img src="../img.jpg">
      </div>
      <div class="col6">
          <p>ssraLorem ipsum dolor sit amet, consectetur</p>
      </div>
  </div>
</div>

1
  • Hola que tal, en realidad funciona muy bién, solo hice un pequeño cambio en las condicionales, así: if ( y >=1 ) y if ( y <=0 ). Muchas gracias!
    – Anselmo
    Commented el 19 jul. 2019 a las 16:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.