jQuery 動畫滾動不會向左/向右移動元素

Question

我有3個部分。 每個部分都有其高度。 問題末尾的 JSFiddle。

目標：我想要一個 img（火箭圖片）跟隨用戶滾動並在他滾動通過一個部分時從右向左改變位置（滑動） 。

當我向下滾動時，我設法讓火箭跟隨我。 現在我希望火箭在我通過第一節時向左滑，然后在我通過第二節時向右滑回。

當用戶滾動通過一個部分時，火箭會旋轉。 效果很好！ 但是當我想讓它滑到另一邊時，它只能在左邊工作。 我無法讓它正確這是用於移動火箭的 jQuery 部分：

$(document).scroll(function() {

  var scrollIs = $(window).scrollTop();
  console.log("I've scrolled: ", scrollIs);

  if($(window).scrollTop() >= topOfSecondSection - 230){  //passed first section
    $(".rocket").css('transform', 'rotate(50deg)'); //turn rocket WORKS
    //$(".rocket").css('left', '10px'); //JUMP CUTS THE ROCKET TO LEFT SIDE, DOESN'T SLIDE/MOVE IT
    $(".rocket").stop().animate({ "left": "10px"}, 100); //ISN'T INSTANT-SMOOTH

    $("#first-section").css("background","red");
    $("#second-section").css("background","blue");
    $("#third-section").css("background","orange");
  }
  if($(window).scrollTop() >= topOfThirdSection - 150){     //passed second section
    $(".rocket").css('transform', 'rotate(1deg)'); //turns rocket back to look straight WORKS
    //$(".rocket").css('right', '10px'); //move rocket right DOESNT'T MOVE
    $(".rocket").stop().animate({ "right": "10px"}, 100); //DOESN'T MOVE

    $("#first-section").css("background","purple");
    $("#second-section").css("background","yellow");
    $("#third-section").css("background","brown");
  }

  //DEFAULT
  if($(window).scrollTop() < s1Height){
  //return to normal
    $(".rocket").css('transform', 'rotate(1deg)'); //WORKS
    //$(".rocket").css('right', '10px'); //DOESN'T MOVE
    $(".rocket").stop().animate({ "right": "10px"}, 100); //DOESN'T MOVE

    $("#first-section").css("background","green");
    $("#second-section").css("background","grey");
  }
});

---

這是 JSFiddle： https ://jsfiddle.net/prozik/d7g3wtye/101/

編輯：

當我在 CSS 中創建時：

.moveLeft {
  left: 10px;
}

.moveRight {
  right: 10px;
}

然后在 jQuery 我做：

$(".rocket").removeClass("moveLeft");
$(".rocket").addClass("moveRight");

有用。 它向右/向左移動元素。 但它使火箭在該位置閃爍。 我需要它滑到另一張幻燈片。

JSFiddle： https ://jsfiddle.net/prozik/d7g3wtye/113/

Answer 1

您所要做的就是在更改“右”或“左”屬性時重置相應的“右”或“左”屬性。 'left' 和 'right' CSS 屬性是不同的，所以如果你不重置其中一個，另一個將被忽略。

您可以通過使用 'left' 和 'right' 屬性的 'intial' 值來做到這一點：

$('.rocket').css('left', 'initial');

JS：

$(document).scroll(function() {

  var scrollIs = $(window).scrollTop();
  console.log("I've scrolled: ", scrollIs);

  if($(window).scrollTop() >= topOfSecondSection - 230){  //passed first section
    $(".rocket").css('transform', 'rotate(50deg)'); //turn rocket
    //$(".rocket").css('left', '10px'); //move rocket left
        $('.rocket').css('left', 'initial');
    $(".rocket").stop().animate({ "right": "10px"}, 100);

    $("#first-section").css("background","red");
    $("#second-section").css("background","blue");
    $("#third-section").css("background","orange");
  }
  if($(window).scrollTop() >= topOfThirdSection - 150){     //passed second section
        $(".rocket").css('transform', 'rotate(1deg)'); //turn rocket
    $('.rocket').css('right', 'initial');
    //$(".rocket").css('right', '10px'); //move rocket right
    $(".rocket").stop().animate({ "left": "10px"}, 100);

    $("#first-section").css("background","purple");
    $("#second-section").css("background","yellow");
    $("#third-section").css("background","brown");
  }
/*   if($(window).scrollTop() > s3Height - 30){
    //passed third section
    $(".rocket").css('left', '10px');
    $("#first-section").css("background","green");
    $("#second-section").css("background","pink");
    $("#third-section").css("background","orange");
  } */

  if($(window).scrollTop() < s1Height){
  //return to normal
    $(".rocket").css('transform', 'rotate(1deg)');
    //$(".rocket").css('right', '10px');
        $('.rocket').css('right', 'initial');
    $(".rocket").stop().animate({ "left": "10px"}, 100);

    $("#first-section").css("background","green");
    $("#second-section").css("background","grey");
  }
});

JSFiddle： https ://jsfiddle.net/d59jymfv/

Answer 2

這是我發現的一種解決方案。

我已經將left: 570px添加到 CSS 中的火箭類，然后當我調用類moveLeft它會移動火箭：

    .rocket {
    display: block;
    height: 150px;
    max-width: 100%;
    position: absolute;
    left: 570px; /*THIS*/
    opacity: 1;
    transition: all 0.5s ease-out;
    /* transform: translate(-10%, 100%); */
    z-index: 10;
}

.moveLeft {
  left: 10px;
}

.moveRight {
  right: 10px;
}

解決方案： https : //jsfiddle.net/prozik/d7g3wtye/122/