GSAP元素上滑固定下滑不固定问题求助

需求说明 #

使用GSAP创建固定元素，要求：

• 滚动到页面的location组件时，location__cta-container保持固定状态
• 滚动完整个location组件后取消固定
• 固定时需覆盖.container内的内容

原代码问题分析 #

1. 触发条件设置错误：原代码以location__cta-container为触发容器，导致固定逻辑只关联该容器本身而非整个location组件
2. 结束位置计算不准确：使用.container的高度计算结束位置，未覆盖整个location组件的滚动范围
3. 层级不足：z-index值过低，无法覆盖.container内容

修改后的代码实现 #

JavaScript代码

stickFloor: function () {
  gsap.registerPlugin(ScrollTrigger);

  ScrollTrigger.create({
    trigger: ".location", // 改为以整个location组件为触发容器
    start: "top top", // 当location组件顶部到达视口顶部时开始固定
    end: "bottom top", // 当location组件底部到达视口顶部时结束固定
    pin: ".location__cta-container",
    pinSpacing: false,
    // 可选：添加scrub让固定过渡更平滑
    // scrub: true
  });
},

CSS代码

.location {
  padding-bottom: 48px;

  &__cta-container {
    border-bottom: 2px solid gray;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.10);
    background-color: white;

    position: relative;
    z-index: 100; /* 提高层级确保覆盖.container内容 */
  }
  &__cta-mobile {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-bottom: 24px;

    position: relative;
    z-index: 2;
  }
}

HTML代码（修正语法错误）

<section class="location">
  <div class="location__cta-container d-block d-lg-none">
    <a href="" data-toggle="modal" data-target="#floor-modal" data-index="" class="location__cta-mobile button">View <?php echo $name; ?> Floor Plans</a>
  </div>

  <div class="container">
    <div class="row justify-content-between">
      <div class="col-12 col-lg-8">
        <div class="location__left">
          <div class="location__about">
            <h3 class="location__heading">About <?php echo $name; ?></h3>
            <p class="location__desc"><?php echo $short_description; ?></p>
          </div>
          <div class="location__rates">
            <div class="location__eyebrow-text">Rates</div>
            <div class="location__rates-list">
              <div class="location__rate">
                <div class="location__sub-title">Price</div>
                <!--..remaining content..//-->

关键修改点 #

• 将触发容器改为整个location组件，确保固定周期覆盖整个组件的滚动范围
• 使用end: "bottom top"替代手动计算高度，自动适配组件实际高度
• 提高location__cta-container的z-index值，确保其能覆盖下方的.container内容
• 修正HTML中class="location""的语法错误（多了一个引号）

内容的提问来源于stack exchange，提问作者Sara Whitmore