How to “stop” an element after scrolling to another element

I am trying to emulate the “Engage. Involve. Connect” widget on this page: https://themeworks.com/. Basically, that widget stays set to the bottom of the page until the user scrolls, where it then parks itself right above the “Experiences shape us.” text.

I am currently working on creating a similar widget at https://williamh117.sg-host.com/. I’m struggling finding a way to get the #widget / #unanchored element to “stop” upon scrolling to “.xp”, a class that is contained by the “Experiences shape us.” element.

Here is my current JavaScript:

window.addEventListener('scroll', function() {
  var widget = document.getElementById('widget');
  var xpElement = document.querySelector('.xp');
  var widgetHeight = widget.offsetHeight;
  var xpPosition = xpElement.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  var distance = xpPosition - windowHeight + widgetHeight;

  if (distance <= 0) {
    // If the widget encounters the '.xp' element, un-anchor it and let it scroll with the page content
    widget.classList.add('unanchored');
  } else {
    // If the widget is still anchored, position it fixed at the bottom of the viewport
    widget.classList.remove('unanchored');
  }
  
  // Set the height of .xp element dynamically
  xpElement.style.setProperty('--xp-height', widgetHeight + 'px'); // Set xpHeight to widgetHeight
});

Here is my HTML:

<h3 id="widget" class="wp-block-heading has-text-align-center frontpage ticss-f97cde6c has-white-color has-text-color has-background" style="background-color:#00000087;font-size:39px">Engage. &nbsp; Involve. &nbsp; Connect.<br><span class="text frontpage2" style="font-weight: 200 !important;">We fuse Art + Engineering to create world-class experiences.</span><br><a href="https://williamh117.sg-host.com/#spacestop"><i class="arrow down"></i></a></h3>

Here is my CSS:

.unanchored {
  position: fixed !important; /* Change position to fixed */
  bottom: 300px !important;
  top: calc(100% - var(--widget-height) - 30px); /* Adjust this value to set the desired distance from .xp */
  left: 0 !important;
    margin-bottom:0px !important;
}

.xp {
  --widget-height: 30px; /* Adjust this value to match the height of your widget */
  position: relative; /* Keep position relative */
}

#widget {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  width: 100%;
  text-align: center;
  transition: bottom 0.3s ease-in-out;
    z-index:1000 !important;
    scroll-behavior: smooth !important;
}

Thank you in advance for any and all advice.