javascript - 如何根据滚动百分比移动 div

Question

我正在尝试为我的应用程序制作一些动画，但我无法弄清楚。我希望文本和描述根据页面滚动的多少而移动。对于第一个 div，我设法做到了，但对于其他的，没有任何反应。当我滚动超过 40% 以根据滚动移动 div 时，我该怎么做？ Here is my code

 $(window).on('scroll', function () {
        let height = $('body').height();
        let scroll = $(document).scrollTop();

        if (scroll > height * 0.01) {
            $('.div1 .title').css({
                left: -350 + Math.min(350, scroll)
            });
            $('.div1 .description').css({
                left: -350 + Math.min(350, scroll)
            });
        }
        if (scroll > height * 0.4) {
            $('.div2 .title').css({
               right: -350 + Math.min(350, scroll)
            });
            $('.div2 .description').css({
                right: -350 + Math.min(350, scroll)
            });
        }

    });

   body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .div1 {

        }
        .div1, .div2, .div3 {
            display: flex;
            justify-content: center;
            margin-top: 500px;
        }

        .left {
            width: 500px;
        }

        .right {
            width: 500px;
            margin-left: 50px;
        }

        .right img, .left img {
            width: 100%;
        }
       .div1 .title {
            position: relative;
            left: -350px;
        }
        .div1 .description {
            position: relative;
            left: -350px;
        }
        .div2 .title {
            position: relative;
            right: -350px;
        }
        .div2 .description {
            position: relative;
            right: -350px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="div1">
    <div class="left">
        <div class="title">
            <h1>Some title</h1>
        </div>
        <div class="description">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
                mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
                dolorum
                ea pariatur doloribus.
            </p>
        </div>
    </div>
    <div class="right">
        <img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </div>
</div>

<div class="div2">
    <div class="left">
        <img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">

    </div>
    <div class="right">
        <div class="title">
            <h1>Some title</h1>
        </div>
        <div class="description">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
                mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
                dolorum
                ea pariatur doloribus.
            </p>
        </div>
    </div>
</div>

<div class="div3">
    <div class="left">
        <div class="title">
            <h1>Some title</h1>
        </div>
        <div class="description">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
                mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
                dolorum
                ea pariatur doloribus.
            </p>
        </div>
    </div>
    <div class="right">
        <img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </div>
</div>

Answer 1

尝试使用以下函数根据滚动位置移动每个 div 中的标题和说明:

 function moveOnViewPort(el, mult) {
    let scrollPos = $(document).scrollTop();
  let viewPortHeight = $(window).height();
  let elementScrollPos = $(el).offset().top;

  if((scrollPos + viewPortHeight) >  elementScrollPos) {
    let moveVal = (scrollPos + viewPortHeight - elementScrollPos) * mult;
    if($(el).hasClass('move-left')) {
        $(el).find('.move').css({
                left: -350 + Math.min(350, moveVal)
            });
    }
    else if($(el).hasClass('move-right')) {
        $(el).find('.move').css({
                right: -350 + Math.min(350, moveVal)
            });
    }
  }
 }

您可以在此处找到工作演示和实现细节:https://jsfiddle.net/dat57qse/