Por qué animar: la animación no está ligada específicamente al comportamiento, sino a un bloque. Por lo tanto, podemos cambiar el estilo sin problemas cuando el bloque llega a un lugar determinado.

Qué necesitas: Durante dos días, en el turno de la tarde, traté de escribir el código exactamente de tal manera que fuera lo más parecido posible a pegajoso, pero todo se rompe con la transición.

___Mi código JavaScript ahora tiene este comportamiento.

 //This code is not working correctly const navigation = document.querySelector('.menu'); const { offsetTop } = navigation; window.addEventListener('scroll', () => { const recY = navigation.getBoundingClientRect().y; const positionHtml = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; if (recY < 1) { navigation.style.top = positionHtml; } else if (positionHtml > offsetTop) { navigation.style.top = offsetTop; } });

Antes de eso, estaba agregando una clase o eliminándola, pero esto reveló un gran problema relacionado con css.

 const navigation = document.querySelector('.menu'); const getMatrix = (selector, lastIndex) => { const transform = window .getComputedStyle(selector, null) .getPropertyValue('transform'); const dataTransform = transform.match(/-?\d+\.?\d+|\d+/g); return +dataTransform[dataTransform.length - lastIndex]; }; const { offsetTop } = navigation; const savaPos = getMatrix(navigation, 1); window.addEventListener( 'scroll', () => { const doc = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; if (navigation.classList.contains('s') && doc >= savaPos) return; else if (doc >= offsetTop && doc >= savaPos) { navigation.classList.add('s'); } else if (doc <= savaPos) { navigation.classList.remove('s'); } }, { passive: true } );

CSS

 .s { position: fixed; transform: translateY(0); width: 100%; height: auto; } .menu { display: flex; transform: translateY(100px); width: 100%; padding: 15px; background-color: #14151a; /* transition: transform 0.1s; */ }

Este código funciona tan bien como Sticky, pero no puede aplicar animación.

El caso es que cuando cambio de una posición a otra, por ejemplo de estática a fija, obtengo un comportamiento incorrecto.

Ahora quiero intentar dejar el código antiguo y limpiar o dar transición por separado, esperando un tiempo en ms, después de agregar o eliminar la clase.

DPK

 /* transition: all 1.1s; */