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/