如何用GSAP ScrollTrigger实现元素固定定位并避免右侧Div偏移

DevOps 小满

2026-7-23

解决ScrollTrigger激活后右侧Div位置偏移问题

问题根源

当.left元素被设置为fixed定位时，它会脱离文档流，原本的flex容器.wrapper里只剩.right元素，flex布局会自动把.right左对齐，导致它跳到左侧上方。

可行解决方案

方案一：给右侧元素加左侧间距

在GSAP动画里，同时调整.right的margin，让它固定在右侧位置：

gsap.registerPlugin(ScrollTrigger);

const tlfour = gsap.timeline({
    scrollTrigger: { 
        trigger: ".main-div", 
        start: "top",
        end: "+=40%",
        scrub: 1,
        markers: true,
        pin: true,
    }
})

// 固定左侧元素，明确位置和宽度
tlfour.to(".left", {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '50vw'
})
// 同时给右侧元素加左侧间距，保持右侧布局
.to(".right", {
    marginLeft: '50%'
}, 0); // 0表示两个动画同步执行

方案二：给左侧元素留占位

通过添加占位元素维持flex布局结构，避免文档流变化影响右侧位置：

修改HTML，添加占位div：

<div class="wrapper">
    <div class="left-placeholder"></div>
    <div class="left">
        <div class="content"><p>test</p></div>
    </div>
    <div class="right">
        <div class="r-content"></div>
    </div>
</div>

添加CSS，设置占位元素尺寸：

.left-placeholder {
    width: 50%;
    height: 100%;
    visibility: hidden;
}

修改GSAP动画，显示占位同时固定左侧元素：

gsap.registerPlugin(ScrollTrigger);

const tlfour = gsap.timeline({
    scrollTrigger: { 
        trigger: ".main-div", 
        start: "top",
        end: "+=40%",
        scrub: 1,
        markers: true,
        pin: true,
    }
})

tlfour.to(".left", {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '50vw'
})
.to(".left-placeholder", {
    visibility: 'visible'
}, 0);