GSAP ScrollTrigger – Pin animation not working correctly

I have an element called .listing__nav which I want to pin upon scroll.

When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view.

To achieve this, I’ve tried the following:

$(function() {

  var action = gsap.set('.listing__nav', {
    position: 'fixed',
    paused: true
  });

  ScrollTrigger.create({
    trigger: '.listing__nav',
    start: 'top 0px',
    onEnter: () => action.play(),
    onLeaveBack: () => action.reverse(),
  });

  gsap.to('.listing__nav', {
    ease: 'none',
    scrollTrigger: {
      trigger: ".banner",
      scrub: 0.3,
      end: 'bottom 110%',
      markers: false,
    }
  });


});

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
}

header {
  background-color: var(--grey);
  padding: 30px 0;
}

.spacer {
  background-color: var(--black);
  height: 300px;
}

.listing__nav {
  padding: 80px 0 52px 0;
  border-bottom: 1px solid var(--black);
}
.listing__spacer {
  padding: 100px 0;
  height: 1000px;
  background-color: var(--black);
}

.banner {
  background-color: var(--grey);
  color: var(--white);
  padding: 60px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<main>
  <header>Header</header>
  <div class="spacer"></div>
  <div class="listing">
    <nav class="listing__nav">Nav</nav>
    <div class="listing__spacer">Spacer</div>
  </div>
  <div class="banner">Banner</div>
</main>

As you can see, the .listing__nav doesn’t pin where intended instead pinning at the bottom of the window, giving it glitchy behaviour.