0

Tengo un elemento (una imagen) centrada y fijada al bottom.

     <div id="contenedor-arrow" style="position: fixed; bottom: 0; vertical-align: center; width: 100%;">
        <a href="#about" data-uk-scroll="">
           <img id="arrow-bottom" class="uk-animation-scale-up" src="/images/arrow.gif" width="60px" alt="agustin.wtf" style="display:none;  margin: 0 auto" >
        </a> 
     </div>

La imagen aparece luego de 9 segundos de cargarse el sitio, a traves de esta funcion:

    const img = document.querySelector('#arrow-bottom');
    setTimeout(function(){
        img.style.display = 'block'

    },9000);

Ahora, yo quisiera que si el usuario scrollea hacia abajo, esta imagen desaparezca, pero si vuelve al top, vuelva a aparecer. Fijandome en la consola del navegador veo una variable llamada window.scrollY que es el dato que me sirve, cuando esté en 0, se quita display:none, si cambia se agrega display:none, pero no se como saber cuando esto sucede. Estoy probando con esto:

    if(window.scrollY > 1){ 
    document.querySelector('arrow-bottom').style.display='none';
    };

Alguna sugerencia?

3 respuestas 3

1

Pondría un intervalo a 1 segundo dentro del cual estaría la condición al posición del scroll, es la solución mas parctica y rapida que encontré

const img = document.querySelector('#arrow-bottom');
setTimeout(function(){
    img.style.display = 'block'

},9000);

setInterval(() => {
    if(window.scrollY > 1){ 
        img.style.display = 'none';
    }else {
        img.style.display = 'block';
    }

}, 1000);
1

Te estaría faltando engancharlo al evento scroll del window

const img = document.querySelector('#arrow-bottom');
setTimeout(function() {
  img.style.display = 'block'
}, 300);

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 20) {
    img.style.display = 'none'
  } else {
    img.style.display = 'block'
  }
});
<div id="contenedor-arrow" style="position: fixed; bottom: 0; vertical-align: center; width: 100%;">
  <a href="#about" data-uk-scroll="">
    <img id="arrow-bottom" class="uk-animation-scale-up" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTA0IDI1NmMwIDEzNy0xMTEgMjQ4LTI0OCAyNDhTOCAzOTMgOCAyNTYgMTE5IDggMjU2IDhzMjQ4IDExMSAyNDggMjQ4em0tMTQzLjYtMjguOUwyODggMzAyLjZWMTIwYzAtMTMuMy0xMC43LTI0LTI0LTI0aC0xNmMtMTMuMyAwLTI0IDEwLjctMjQgMjR2MTgyLjZsLTcyLjQtNzUuNWMtOS4zLTkuNy0yNC44LTkuOS0zNC4zLS40bC0xMC45IDExYy05LjQgOS40LTkuNCAyNC42IDAgMzMuOUwyMzkgNDA0LjNjOS40IDkuNCAyNC42IDkuNCAzMy45IDBsMTMyLjctMTMyLjdjOS40LTkuNCA5LjQtMjQuNiAwLTMzLjlsLTEwLjktMTFjLTkuNS05LjUtMjUtOS4zLTM0LjMuNHoiLz48L3N2Zz4="
      width="60px" alt="agustin.wtf" style="display:none;  margin: 0 auto">
  </a>
</div>
<div id="lipsum">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, nisl eu bibendum fringilla, nisi ex pharetra libero, a vehicula magna orci vitae erat. Pellentesque eu metus dui. Nunc dignissim ac nulla id placerat. Ut eget neque mollis tellus viverra
    blandit a ac urna. Curabitur tempor facilisis enim, et aliquam turpis aliquam hendrerit. Nullam auctor pulvinar augue, ac lacinia lectus feugiat non. Nunc hendrerit hendrerit tellus, sed bibendum metus efficitur tempor. Morbi malesuada hendrerit euismod.
    Sed malesuada urna in viverra blandit.
  </p>
  <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate nibh sit amet sem suscipit congue. Proin malesuada luctus ligula sed vulputate. Etiam ullamcorper libero nec dolor ultricies aliquet. Nulla ipsum
    tellus, interdum et hendrerit sed, lacinia eget quam. Cras efficitur hendrerit tempor. Nunc tristique metus ut nulla hendrerit elementum. Etiam in nisi convallis quam scelerisque euismod. Donec feugiat at sem ac faucibus. Nunc eget scelerisque est.
    Sed vitae tincidunt ipsum. Aenean dignissim elementum posuere. Curabitur eget nisl erat. Etiam vel eleifend nisl.
  </p>
  <p>
    Cras et lacus vitae leo iaculis imperdiet vitae ac nisi. Praesent et tellus sapien. Proin in felis id tortor ullamcorper sagittis. Integer eros lacus, sodales sit amet cursus et, aliquam tristique leo. Duis placerat pharetra urna. Praesent semper sit
    amet justo eu lacinia. Integer vel metus quis sapien lobortis porta luctus in justo. Etiam gravida mi in purus feugiat, a efficitur metus eleifend. Ut nibh diam, posuere id pellentesque sit amet, scelerisque sit amet leo.
  </p>
  <p>
    Nunc feugiat eget nulla ac facilisis. Praesent at egestas elit. Donec nec porta neque, nec tristique enim. Sed blandit ultricies ligula. Suspendisse potenti. Donec id tellus auctor odio aliquet luctus quis vitae ligula. Ut ornare leo eu velit posuere
    cursus. Quisque non nibh vel lorem hendrerit blandit at nec diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vitae blandit nisi. Ut justo lacus, hendrerit scelerisque risus sit amet, convallis consequat
    nulla.
  </p>
  <p>
    Aliquam vulputate ullamcorper nisi id euismod. Etiam consequat egestas metus, eu posuere libero lacinia nec. Integer pellentesque, odio et semper tristique, dui velit pharetra turpis, eget placerat tortor est vitae ligula. Nullam sagittis orci vitae enim
    semper aliquet. Aliquam sed dictum mauris. Sed sodales rutrum justo, id imperdiet ligula ornare non. Duis eleifend dapibus est, ut laoreet erat mollis vel. Integer lacinia varius interdum. Pellentesque ac nisl eu ligula convallis lacinia. Maecenas
    gravida, tortor a elementum bibendum, diam arcu ultricies dui, at tempus elit lectus ut velit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, nisl eu bibendum fringilla, nisi ex pharetra libero, a vehicula magna orci vitae erat. Pellentesque eu metus dui. Nunc dignissim ac nulla id placerat. Ut eget neque mollis tellus viverra
    blandit a ac urna. Curabitur tempor facilisis enim, et aliquam turpis aliquam hendrerit. Nullam auctor pulvinar augue, ac lacinia lectus feugiat non. Nunc hendrerit hendrerit tellus, sed bibendum metus efficitur tempor. Morbi malesuada hendrerit euismod.
    Sed malesuada urna in viverra blandit.
  </p>
  <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate nibh sit amet sem suscipit congue. Proin malesuada luctus ligula sed vulputate. Etiam ullamcorper libero nec dolor ultricies aliquet. Nulla ipsum
    tellus, interdum et hendrerit sed, lacinia eget quam. Cras efficitur hendrerit tempor. Nunc tristique metus ut nulla hendrerit elementum. Etiam in nisi convallis quam scelerisque euismod. Donec feugiat at sem ac faucibus. Nunc eget scelerisque est.
    Sed vitae tincidunt ipsum. Aenean dignissim elementum posuere. Curabitur eget nisl erat. Etiam vel eleifend nisl.
  </p>
  <p>
    Cras et lacus vitae leo iaculis imperdiet vitae ac nisi. Praesent et tellus sapien. Proin in felis id tortor ullamcorper sagittis. Integer eros lacus, sodales sit amet cursus et, aliquam tristique leo. Duis placerat pharetra urna. Praesent semper sit
    amet justo eu lacinia. Integer vel metus quis sapien lobortis porta luctus in justo. Etiam gravida mi in purus feugiat, a efficitur metus eleifend. Ut nibh diam, posuere id pellentesque sit amet, scelerisque sit amet leo.
  </p>
  <p>
    Nunc feugiat eget nulla ac facilisis. Praesent at egestas elit. Donec nec porta neque, nec tristique enim. Sed blandit ultricies ligula. Suspendisse potenti. Donec id tellus auctor odio aliquet luctus quis vitae ligula. Ut ornare leo eu velit posuere
    cursus. Quisque non nibh vel lorem hendrerit blandit at nec diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vitae blandit nisi. Ut justo lacus, hendrerit scelerisque risus sit amet, convallis consequat
    nulla.
  </p>
  <p>
    Aliquam vulputate ullamcorper nisi id euismod. Etiam consequat egestas metus, eu posuere libero lacinia nec. Integer pellentesque, odio et semper tristique, dui velit pharetra turpis, eget placerat tortor est vitae ligula. Nullam sagittis orci vitae enim
    semper aliquet. Aliquam sed dictum mauris. Sed sodales rutrum justo, id imperdiet ligula ornare non. Duis eleifend dapibus est, ut laoreet erat mollis vel. Integer lacinia varius interdum. Pellentesque ac nisl eu ligula convallis lacinia. Maecenas
    gravida, tortor a elementum bibendum, diam arcu ultricies dui, at tempus elit lectus ut velit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, nisl eu bibendum fringilla, nisi ex pharetra libero, a vehicula magna orci vitae erat. Pellentesque eu metus dui. Nunc dignissim ac nulla id placerat. Ut eget neque mollis tellus viverra
    blandit a ac urna. Curabitur tempor facilisis enim, et aliquam turpis aliquam hendrerit. Nullam auctor pulvinar augue, ac lacinia lectus feugiat non. Nunc hendrerit hendrerit tellus, sed bibendum metus efficitur tempor. Morbi malesuada hendrerit euismod.
    Sed malesuada urna in viverra blandit.
  </p>
  <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate nibh sit amet sem suscipit congue. Proin malesuada luctus ligula sed vulputate. Etiam ullamcorper libero nec dolor ultricies aliquet. Nulla ipsum
    tellus, interdum et hendrerit sed, lacinia eget quam. Cras efficitur hendrerit tempor. Nunc tristique metus ut nulla hendrerit elementum. Etiam in nisi convallis quam scelerisque euismod. Donec feugiat at sem ac faucibus. Nunc eget scelerisque est.
    Sed vitae tincidunt ipsum. Aenean dignissim elementum posuere. Curabitur eget nisl erat. Etiam vel eleifend nisl.
  </p>
  <p>
    Cras et lacus vitae leo iaculis imperdiet vitae ac nisi. Praesent et tellus sapien. Proin in felis id tortor ullamcorper sagittis. Integer eros lacus, sodales sit amet cursus et, aliquam tristique leo. Duis placerat pharetra urna. Praesent semper sit
    amet justo eu lacinia. Integer vel metus quis sapien lobortis porta luctus in justo. Etiam gravida mi in purus feugiat, a efficitur metus eleifend. Ut nibh diam, posuere id pellentesque sit amet, scelerisque sit amet leo.
  </p>
  <p>
    Nunc feugiat eget nulla ac facilisis. Praesent at egestas elit. Donec nec porta neque, nec tristique enim. Sed blandit ultricies ligula. Suspendisse potenti. Donec id tellus auctor odio aliquet luctus quis vitae ligula. Ut ornare leo eu velit posuere
    cursus. Quisque non nibh vel lorem hendrerit blandit at nec diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vitae blandit nisi. Ut justo lacus, hendrerit scelerisque risus sit amet, convallis consequat
    nulla.
  </p>
  <p>
    Aliquam vulputate ullamcorper nisi id euismod. Etiam consequat egestas metus, eu posuere libero lacinia nec. Integer pellentesque, odio et semper tristique, dui velit pharetra turpis, eget placerat tortor est vitae ligula. Nullam sagittis orci vitae enim
    semper aliquet. Aliquam sed dictum mauris. Sed sodales rutrum justo, id imperdiet ligula ornare non. Duis eleifend dapibus est, ut laoreet erat mollis vel. Integer lacinia varius interdum. Pellentesque ac nisl eu ligula convallis lacinia. Maecenas
    gravida, tortor a elementum bibendum, diam arcu ultricies dui, at tempus elit lectus ut velit.
  </p>
</div>

0

Puedes usar el evento onscroll y ayudarte con la propiedad scrollY de window:

window.onload = ()=>{

    const arrowBottom = document.getElementById("arrow-bottom");

    window.onscroll = () =>{

        if(window.scrollY === 0){
            arrowBottom.style.display = "block";
        }else{
            arrowBottom.style.display = "none";
        }

    }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    
    <div class="huge" style = "width: 1200px; height: 2000px;"></div>
    <div id="contenedor-arrow" style="position: fixed; bottom: 0; vertical-align: center; width: 100%;">
        <a href="#about" data-uk-scroll="">
           <img id="arrow-bottom" class="uk-animation-scale-up" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTOvtgIt86SjnDsZFgCkp3oidANvifG0l2f_EwSjWD0Dkl6ZKez&usqp=CAU" width="60px" alt="agustin.wtf" style="display:none;  margin: 0 auto" >
        </a> 
     </div>
</body>
</html>

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.