GSAP ScrollTrigger - 固定动画无法正常工作

Question

我有一个名为 .listing__nav 的元素，我想将其固定在滚动上。

当 .listing__nav 触及 window 顶部时，我希望它变得固定，并且仅当 banner 元素进入视图时才取消固定。

为了实现这一目标，我尝试了以下方法：

$(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>

正如您所看到的，.listing__nav 没有固定在预期的位置，而是固定在窗口底部，从而导致其行为出现故障。

Answer 1

使用下面的 JS 解决了它。

我正在创建两个不需要的 ScrollTriggers。

$(function() {

  ScrollTrigger.create({
    trigger: '.listing__nav',
    pin: true,
    start: 'top top',
    scrub: 0.5,
    endTrigger: ".banner",
    end: "top bottom",
    pinSpacing: false,
    markers: true
  });

});