Estoy tratando de cambiar la posición de un elemento entre fijo y absoluto en función de qué tan cerca esté el elemento del otro. Así que tengo un botón que se fija de arriba hacia abajo hasta que su valor inferior + 25 px es menor o igual al valor de los pies de página y para que se detenga en la parte superior. Mi problema es que el botón se detiene en el lugar correcto, por lo que el cambio de fijo a absoluto funciona bien, pero mientras que la posición relativa del botón al pie de página es negativa, el booleano que alterna las clases del botón parpadea entre verdadero y falso para que va de absoluto a fijo de ida y vuelta muy rápidamente.

Este es mi código que rastrea la posición y cambia el valor booleano:

¿Hay un problema de lógica o qué? No puedo resolver esto :(

 var button = document.querySelector('.bottomCtaFixed') var footer = document.querySelector('.footer') window.addEventListener('scroll', (e) => { var buttonRect = button.getBoundingClientRect() var buttonBottom = buttonRect.bottom + 25 var footerRect = footer.getBoundingClientRect() var footerTop = footerRect.y var relativePos = footerTop - buttonBottom console.log('button', buttonRect) console.log('footer', footerRect) console.log('buttonBottom', buttonBottom) console.log('relativePos', relativePos) if (relativePos <= 0) { this.isStill = true if (footerTop >= buttonBottom) { this.isStill = false } else { this.isStill = true } } else { this.isStill = false } console.log(this.isStill) })

Y aquí están las clases:

 .bottomCtaFixed { position: fixed; bottom: 25px; left: 25px; margin-top: 25px; width: calc(100% - 50px); z-index: 101; @media screen and (max-width: 290px) { display: none } @media screen and (min-width: $bp-xs) { display: none } } .bottomCtaStill { position: absolute; top: calc(-9vh - 25px); left: 25px; width: calc(100% - 50px); z-index: 101; @media screen and (max-width: 290px) { display: none } @media screen and (min-width: $bp-xs) { display: none } }