css 如何使一个元素的位置固定与scrolltrigger gsap？

bvuwiixz 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(160)

我有一个容器，它有两个div，每个div的宽度为50%，当滚动触发器不活动时，对齐方式是我想要的，但是当滚动触发器活动时，我想让左边的div的位置固定，右边的div在它的位置，但是右边的div跳到左边的div上面，如何阻止它跳到别人身上，让它在自己的位置？

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

body {
    height: 300vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-div {
    width: 100%;
    height: 140vh;
    position: relative;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 50%;
    height: 100%;
}

.content {
    float: left;
    width: 100%;
    height: 120vh;
    background-color: black;
    position: relative;
}

.content p {
    color: white;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-0%, -50%);
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.r-content {
    float: right;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    background-color: yellow;
    z-index: 5;
}

<body>
    <section class="main-div">
        <div class="wrapper">
            <div class="left">
                <div class="content"><p>test</p></div>
            </div>
            <div class="right">
                <div class="r-content"></div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

css

来源：https://stackoverflow.com/questions/76085078/how-to-make-an-element-position-fixed-with-scrolltrigger-gsap

1条答案

按热度按时间

r7xajy2e1#

在'left' div内部创建一个新层，并将该新层的position属性设置为sticky，然后从scrolltrigger中删除srub属性就可以了！

gsap.registerPlugin(ScrollTrigger);

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

/*new content*/

tlfour.to(".left-wrapp", {
    position: 'sticky',
    top: 0,  
})

body {
    height: 300vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-div {
    width: 100%;
    height: 140vh;
    position: relative;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 50%;
    height: 100%;
}

.content {
    float: left;
    width: 100%;
    height: 120vh;
    background-color: black;
    position: relative;
}

.content p {
    color: white;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-0%, -50%);
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.r-content {
    float: right;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    background-color: yellow;
    z-index: 5;
}

<body>
    <section class="main-div">
        <div class="wrapper">
            <div class="left">
                
                <!--new content-->
                <div class="left-wrapp">
                  <div class="content"><p>test</p></div>
                </div>
                
            </div>
            <div class="right">
                <div class="r-content"></div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何使一个元素的位置固定与scrolltrigger gsap？

1条答案

相关问题

热门标签

最新问答