3

Necesito poder utilizar la aparición como referencia para el siguiente código de tal forma que si un div aparece a los 1000px de scroll desaparezca 500px después, deben ser independientes una acción de la otra para poder hacer distintas combinaciones. Gracias.

$(window).scroll(function()  {
    if ($(window).scrollTop() > 1000 )  {
      $(".topmenu").fadeIn();   // > 100px from top - show div
    }
    else {
     $(".topmenu").fadeOut();    // <= 100px from top - hide div
    }
});
$(window).scroll(function() {
    if ($(this).scrollTop() > 2000) { //use `this`, not `document`
        $('.height600').css({
            'display': 'none'
        });
    }
});
.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
#back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class=" topmenu height600">
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>

11
  • 3
    El html que pones es "inválido". En un documento los id deben ser únicos. Te recomiendo que en lugar de usar id="back" uses class="back" o similar y en tus estilos .back en lugar de #back. Lee developer.mozilla.org/en-US/docs/Web/API/Element/id
    – devconcept
    el 15 mar. 2016 a las 20:57
  • Muchas gracias por el apunte, lo pondré en práctica :)
    – Ivan Soler
    el 15 mar. 2016 a las 20:59
  • De nada. Eso también se puede resumir en: Usa id para identificar y class para classificar tus elementos. ;)
    – devconcept
    el 15 mar. 2016 a las 21:01
  • 1
    La pregunta me parece un poco confusa y no termino de comprender la relación entre pregunta y código. ¿Es el menú lo que quieres que aparezca/desaparezca?¿Qué es lo que falla en el código de arriba?
    – Alvaro Montoro
    el 15 mar. 2016 a las 21:02
  • Sí Alvaro, lo que quiero es que la segunda acción (que hace que desaparezca el menú en este caso) haga desaparecer el menú después de 500 px (por ejemplo) después de aparecer y no desde el borde superior de la ventana.
    – Ivan Soler
    el 15 mar. 2016 a las 21:03

1 respuesta 1

3

Si lo que quieres es que el menú (o cualquier otro elemento) aparezca llegado a un scroll y que desaparezca después de X pixels, basándote en la clase que tenga, te recomendaría que hicieras algunos cambios:

  • No utilices clases, utiliza los atributos data-*.
  • Podrías usar dos atributos data-*:
    • data-in: el número de pixels cuando se mostrará el elemento
    • data-out: el número de pixels cuando se esconderá el elemento
  • Cuando se haga scroll, comprueba los elementos que contengan esos atributos y muéstralos/escóndelos según corresponda (el elemento debería ser visible si cumple el siguiente requerimiento: data-in < scroll < data-out).

Así quedaría el código con esos cambios. He añadido dos menús con diferente contenido y diferentes data-in y data-out para que puedas ver como se muestran/esconden cuando llegan a los pixels indicados:

$(window).scroll(function()  {

  // comprobar todos los elementos que tengan el atributo data-in
  $("[data-in]").each(function() {
    
    // si cumplen con data-in < scroll < data-out, los mostramos
    if ($(window).scrollTop() > parseInt($(this).data("in")) && $(window).scrollTop() < parseInt($(this).data("out")) )  {
      $(this).fadeIn();
    }
    // si no, los escondemos
    else {
      $(this).fadeOut();
    }

  });

});
.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
.back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class="topmenu" data-in="1000" data-out="1500">A</div>
<div class="topmenu" data-in="2000" data-out="2500">B</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>
<div class="back">
</div>
<div class="back" style="background:green";>
</div>

8
  • Esto no soluciona mi problema, yo quisiera lo siguiente, imaginemos dos clases: In100 (que muestra el div tras 100px) y Out500 (que esconde el div tras avanzar 500px) si hubiese una tercera clase In1000 podría combinarla con Out500 y así sucesivamente.
    – Ivan Soler
    el 15 mar. 2016 a las 21:33
  • 1
    Tienes que añadir más y mejores detalles a tus preguntas, porque nosotros no podemos adivinar cosas como esa (es la primera vez que haces referencia a algo como in100 o out500). Al menos ahora creo que sé por dónde quieres que vaya el asunto. Quieres añadir algo que indique cuándo se debe mostrar el div y por cuánto, ¿correcto?
    – Alvaro Montoro
    el 15 mar. 2016 a las 21:36
  • Sí Alvaro, perdona por la confusión. A veces la falta de conocimiento provoca esto, probablemente yo no veo tantos matices posibles u opciones en la resolución de mis problemas. Quiero que diga cuándo y por cuánto en referencia a ese cuando y no al total de la página (si fuese tiempo que aparezca a los 10 segundos y desaparezca 2 segundos después).
    – Ivan Soler
    el 15 mar. 2016 a las 21:41
  • @IvanSoler He cambiado la respuesta, mira a ver si esta se ajusta mejor
    – Alvaro Montoro
    el 15 mar. 2016 a las 21:52
  • Increíble @AlvaroMontoro es mejor de lo que esperaba. Muchísimas gracias ! Aunque preferiría hacerlo con clases para poder modificarlo todo desde la hoja de java cada vez que me parezca.
    – Ivan Soler
    el 15 mar. 2016 a las 21:58

Tu Respuesta

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

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