- 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>