3

Buenas estoy haciendo una función con scroll.

Cuando baja el scroll 150 muestro un banner en la parte de abajo y al subir el scroll a tope se vuelve a esconder.

$(function() {
  // esta parte es la que controla cuando se mueve el scroll y ejecuta una función
  $(document).scroll(function() {
    // aca se pregunta si el scroll se movio de pa bajo.
    if ($(this).scrollTop() < 150) {
      // esta parte cambia el atributo "src" de la etiqueta "img"
      $('.barraTella').css("bottom","-200px");
      $('.barraTella').css("transition","1s");
    }
    if ($(this).scrollTop() > 150) {
      $('.barraTella').css("bottom","0px");
      $('.barraTella').css("transition","1s");
    }
  });
});

Pero también le añadí un botón para poder cerrar ese banner.

$( "#closeLlama" ).click(function() {
    $('#barraTella').css("bottom","-200px");
    $('#barraTella').css("transition","1s");
  });

El problema está en que, si lo cierro, y hago de nuevo scroll se me vuelve a mostrar.

Lo que necesito es: que hasta que no vuelva a subir del todo y vuelva a hacer esos 150 hacia abajo, no se vuelva a mostrar.

¿Alguna sugerencia?

0

1 respuesta 1

4

Puedes utilizar una var para que cuando clickes le cambie el valor a esa variable:

var buttonClicked= false;

y en el if ($(this).scrollTop() > 150 && buttonClicked==false) compruebas que esa variable siga como estaba (es decir no se ha clickado aun). Si en el evento del click le cambias la variable ya no entrara ahí

$( "#closeLlama" ).click(function() {
        buttonClicked=true;
      });

Para acabar reinicias la variable cuando el scroll vuelva arriba:

if ($(this).scrollTop() < 150) {
      buttonClicked=false;
}

Snippet:

$(function() {
  var buttonClicked= false;
  $(document).scroll(function() {
  $("#outputScrollPosition").html("Scroll position:"+$(this).scrollTop()+"<br>Click: "+buttonClicked.toString());
    if ($(this).scrollTop() < 150) {
      buttonClicked=false;
      $('.barraTella').css("bottom","-200px");
      $('.barraTella').css("transition","1s");
    }
    if ($(this).scrollTop() > 150 && buttonClicked==false) {
      $('.barraTella').css("bottom","0px");
      $('.barraTella').css("transition","1s");
    }
  });
  $( "#closeLlama" ).click(function() { 
    buttonClicked=true;
    $('#barraTella').css("bottom","-200px");
    $('#barraTella').css("transition","1s");
  });
});
body{
  height: 800px;
}

.barraTella {
  position: fixed;
  bottom: -200px;
  width: 100%;
  background-color: lightgreen;
}

#closeLlama {
  position: fixed;
  bottom: 50px;
}

#outputScrollPosition{
  position: fixed;
  right: 10px;
  top: 0px;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
 <button id="closeLlama">cerrar</button>
  <div id="barraTella" class="barraTella">
    BRUCE BANNER
  </div>
  <div id="outputScrollPosition"></div>
</body>

1
  • Wowww!!! grande @Parra. Me sirvio al 100% muchas gracias!
    – Miguel
    Commented el 26 may. 2019 a las 15:20

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.