js 元素滾動動畫

$(function(){ 
  // 獲取屏幕高度
  let clientHeight = $(window).height();
  // 獲取屏幕寬度
  let clientWidth = $(window).width();
  
  // 獲取滾動條位置
  let scrollTop;
  var box5Flg=false;
  $(window).scroll(function () {
    scrollTop = document.documentElement.scrollTop;
    // 第一屏動畫
    var box2 = scrollTop - $(".box2").offset().top;
    if (box2>=0) {
      $(".box2Box").css({position: 'fixed'})
      $(".box1Bg").css({opacity: 0})
      
    } else {
      $(".box1Bg").css({opacity: 1})
      $(".box2Box").css({position: 'relative'})
      $(".box2Bg2").css({opacity: 0})
      $(".box2Bg1").css({opacity: 1})
      $(".box2").addClass('box2Btm')
      $(".box2").removeClass('box2Top')
    }
    // var proportionTwo70 = (1/(35/100))*TwoBlockTwoAnim;//前35% 當成 100% 算比列
    if (box2>=0&&box2<=clientHeight) {
      let hei = box2/clientHeight*100;
      $(".box2Right").css({right: '100%'})
      $(".box2RightContent").removeClass('box2RightContentAnim');
      
      if (hei<=70) {
        var proportionTwo70 = (1/(70))*hei;//前70% 當成 100% 算比列
        $(".box2Bg2").css({opacity: proportionTwo70})
        $(".box2Bg1").css({opacity: 1- proportionTwo70})
      } else {
        $(".box2Bg2").css({opacity: 1})
        $(".box2Bg1").css({opacity: 0})
      }
    } else if (box2>=clientHeight&&box2<=clientHeight*2) {
      let hei2 = (box2-clientHeight) /clientHeight *100;
      $(".box2Btm4").css({top: '100%'})
      $('.box2Btm4Text').removeClass('box2Btm4TextAnim');
      if (hei2<=65) {
        var proportionTwo65 = (1/(65/100))*hei2;//前35% 當成 100% 算比列
        $(".box2Right").css({right: 100-proportionTwo65+'%'})
        if (hei2>=56) {
          $(".box2RightContent").addClass('box2RightContentAnim');
        }
      } else {
        $(".box2Right").css({right: '0%'})
        $(".box2RightContent").addClass('box2RightContentAnim');
      }

    } else if (box2>clientHeight*2&&box2<=clientHeight*3) {

      $(".box2Right").css({right: '0%'})
      $(".box2RightContent").addClass('box2RightContentAnim');

      let hei3 = (box2-clientHeight*2) /clientHeight *100;
      if (hei3<=65) {
        var hei3Two65 = (1/(65/100))*hei3;//前35% 當成 100% 算比列
        $(".box2Btm4").css({top: 100-hei3Two65+'%'})
        if (hei3>=50) {
          $('.box2Btm4Text').addClass('box2Btm4TextAnim');
        }
      } else {
        $(".box2Btm4").css({top: 0+'%'})
      }

    } else if (box2>clientHeight*3) {

      $(".box2Box").css({position: 'relative'})
      $(".box2").addClass('box2Top')
      $(".box2").removeClass('box2Btm')
      $(".box2Right").css({right: '0%'})
      $(".box2RightContent").addClass('box2RightContentAnim');

      $(".box2Btm4").css({top: '0%'})
      $('.box2Btm4Text').addClass('box2Btm4TextAnim');

    }

    // 動畫5
    var box5 = scrollTop - $(".box5").offset().top;
    if (box5>=0) {
      box5Flg=true;
      $(".panel-box").removeAttr("style");
      console.log(11111)
      $('.maidian').css('position','fixed')
      $('.maidian').removeClass('maidianTop')
      let outerHeight =  $('.box5').outerHeight();
      let maidian =  $('.maidian').outerHeight();

      let index = outerHeight/3;
      if (box5>0&&box5<=index) {
        $('.showTit1').show();
        $('.showTit2').hide();
        $('.showTit3').hide();
      } else if (box5>index&&box5<=index*2) {
        $('.showTit2').show();
        $('.showTit1').hide();
        $('.showTit3').hide();
      } else if (box5>index*2&&box5<=index*3) {
        $('.showTit3').show();
        $('.showTit2').hide();
        $('.showTit1').hide();
      } 
        
      if (outerHeight-box5<=maidian) {
        $('.maidian').css('position','absolute')
        $('.maidian').addClass('maidianTop')
      }
    } else {
      if (box5Flg) {
        $(".panel-box").css({"position": "fixed", "top": "0px"});
        box5Flg=false;
      }
      $('.maidian').css('position','absolute')
    }

    // 動畫6
    let box6 = scrollTop - $(".box6").offset().top;
    let box6Heigth = $('.box6').outerHeight();
    if (box6+100>0) {
      $('.box6Tit').addClass('box6TitAnim');
      $('.bomBox').addClass('bomBoxAnim');

    } else {
      if (box6+box6Heigth<=0) {
        $('.box6Tit').removeClass('box6TitAnim');
        $('.bomBox').removeClass('bomBoxAnim');
      }
    }
    if (box6>=box6Heigth) {
      $('.box6Tit').removeClass('box6TitAnim');
      $('.bomBox').removeClass('bomBoxAnim');
    } 

  });
  
})