GSAP ScrollTrigger - Pin动画不能正常工作

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

});

​