Home / Questions / 266265
Accepted
Miguel
Asked: 2020-05-24 10:26:52 +0800 CST 2020-05-24 10:26:52 +0800 CST

Scroll function

  • 772

Hi, I'm making a function with scroll.

When the scroll goes down 150 I show a banner at the bottom and when I go up the scroll to the top it hides again.

$(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");
    }
  });
});

But I also added a button to be able to close that banner.

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

The problem is that, if I close it, and I scroll again, it is shown again.

What I need is: that until I go back up all the way and do those 150 down again, it doesn't show up again.

Any suggestion?

javascript

1 Answers

  1. Best Answer

    You can use one varso that when you click, the value of that variable changes:

    var buttonClicked= false;

    and in if ($(this).scrollTop() > 150 && buttonClicked==false)it you check that that variable continues as it was (that is, it has not been clicked yet). If in the click event you change the variable it will no longer enter there

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

    To finish, you reset the variable when the scroll returns to the top:

    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>

    • 4