es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar el observador de intersección para mostrar/ocultar un elemento.

13 Jul, 2023 Programación

Necesito mostrar nava si wrapt no es visible desplazando la página y viceversa, ocultar nava si wrapt es visible. ¿Qué está mal con este código de JavaScript?

let io = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){modify(entry.target);}
        else{revert(entry.target);}
    });
});

function modify(el){
  if(el.id == "wrapt"){$(nava).slideUp();}
}

function revert(el){
  if(el.id == "wrapt"){$(nava).slideDown();}
}

$(document).ready(function(){
    io.observe(document.querySelector('#wrapt'));
});

.nava{
display:none
height:25px;
background:orange;
position:relative;
z-index:9;
}
.wrapt{
height:54px;
background:lightblue;
}
.story{
height:200vh;
background:#ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='nava' id='nava'></div>
<div class='wrapt' id='wrapt'></div>
<div class='story'></div>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    No parece haber nada inherentemente incorrecto con el código JavaScript proporcionado. Sin embargo, hay algunas cosas que podrían mejorarse o tenerse en cuenta:

    • No está claro dónde se define nava. Puede haber sido definido en otra parte del código, o como una variable global, pero no se muestra en el fragmento proporcionado.
    • Las funciones modify y revert solo se ejecutan si el elemento observado tiene un ID de “wrapt”. Esto parece intencional según el enunciado del problema, pero vale la pena señalar que este código no funcionará como se espera si el elemento observado no tiene ese ID.
    • El uso de $(nava) asume que nava es un objeto de jQuery, pero no está claro si ese es realmente el caso. Si nava es solo un elemento DOM regular, la función de jQuery no funcionará como se espera. Para solucionar esto, el código se podría actualizar para usar $(el) en su lugar, para asegurarse de que siempre se esté utilizando un objeto de jQuery.

Comments are closed.