I'm trying to switch the position of an element between fixed and absolute based on how close the element is to the other. So I have a button which is fixed from the top to the bottom till it's bottom value + 25px is less or equal to footers y value so that it stops to the top. My problem is that the button stops in the right place so the switch from fixed to absolute goes well but while the relative position of the button to the footer are negative the boolean which toggles the classes of the button flickers between true and false so that it goes from absolute to fixed back and forth very quickly.

This is my code that is tracking the position & switching the boolean:

Is there a logic issue or what? I cannot figure this out :(

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)
})

And here's the classes:

.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
  }
}