0

Estoy haciendo un website y quiero hacer que un elemento: 1- Este oculto. 2-Aparezca cuando el scroll sea mayor a 900px. 3-Desaparezca cuando el scroll sea mayor a los 3000px. Estuve utilizando Jquery y el codigo que hice es el siguiente:

$(document).ready(function() {
    //show hide button on scroll
    $(window).scroll(function() {
        if($(this).scrollTop() > 900) {
              $('#email2').fadeIn();
        } else {
              $('#email2').fadeOut();
        };
    });
});

Pero solo cumple los puntos 1 y 2, me ayudan para lograr los 3 puntos por favor? (intente con else if y también con switch, pero no lo logre)

1 respuesta 1

2

La condicion esta mal, deberia ser asi:

if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) 

Modifique un poco tu codigo, probalo...

$(document).ready(function() {
  //show hide button on scroll
  $('.box').hide();
  $(window).scroll(function() {
    if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) {
      $('.box').fadeIn();
    } else {
      $('.box').fadeOut();
    };
  });
});
.container {
  height: 5000px;
  background-color: red;
}

.box {
  height: 100px;
  width: 200px;
  background-color: blue;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='box' id='box'></div>

</div>

3
  • Muchísimas gracias mi amigo, lo lograste #crack!!!! :) Commented el 10 jul. 2018 a las 17:20
  • y una preguntita mas, si quiero hacerlo responsive, no puedo trabajar con px, intente ponerle %, pero no da, tienes alguna idea de como podría lograrlo? Commented el 10 jul. 2018 a las 17:30
  • @oscarcaballero deberias crear otra pregunta Commented el 10 jul. 2018 a las 20:21

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.