Javascript jQuery在滚动上动画不'；t向左/向右移动元件

我有三个部分。每个部分都有其高度。在问题的末尾打钩

目标：我想要一个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");
  }
});

然后在jQuery中，我会：

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

它起作用了。它将元素向右/向左移动。但它使火箭在这个位置闪烁。我需要它滑到另一张幻灯片上

---

jsfiddle:

更改“右”或“左”属性时，只需重置相应的“右”或“左”属性。“left”和“right”CSS属性是不同的，因此如果不重置其中一个，则会忽略另一个

您可以通过使用“左”和“右”属性的“初始”值来实现这一点：

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

JS:

$（文档）。滚动（函数（）{
var scrollIs=$（window.scrollTop（）；
log（“我已经滚动：”，scrollIs）；
if（$（window）.scrollTop（）>=topOfSecondSection-230）{//通过了第一节
$（“.rocket”）.css（'transform'，'rotate（50度）；//旋转火箭
//$（“.rocket”）.css（'left'，'10px'）；//向左移动火箭
$（'.rocket'）.css（'left'，'initial'）；
$（“.rocket”）.stop（）.animate（{“right”：“10px”}，100）；
$（“#第一节”）.css（“背景”、“红色”）；
$（“第二部分”）.css（“背景”、“蓝色”）；
$（“第三节”）.css（“背景”、“橙色”）；
}
if（$（window）.scrollTop（）>=topOfThirdSection-150）{//通过了第二节
$（“.rocket”）.css（'transform'，'rotate（1deg）；//旋转火箭
$（'.rocket'）.css（'right'，'initial'）；
//$（“.rocket”）.css（'right'，'10px'）；//向右移动火箭
$（“.rocket”）.stop（）.animate（{“left”：“10px”}，100）；
$（“#第一节”）.css（“背景”、“紫色”）；
$（“#第二节”）.css（“背景”、“黄色”）；
$（“#第三节”）.css（“背景”、“棕色”）；
}
/*if（$（窗口）.scrollTop（）>s3Height-30）{
//通过第三节
$（“.rocket”）.css（'left'，'10px'）；
$（“#第一节”）.css（“背景”、“绿色”）；
$（“#第二节”）.css（“背景”、“粉色”）；
$（“第三节”）.css（“背景”、“橙色”）；
} */
if（$（窗口）.scrollTop（）

---

JSFiddle:

这里是我找到的一个解决方案

我已经将

left:570px

添加到CSS中的rocket类中，然后当我调用该类

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;
}

---

解决方案：

你有没有考虑过使用？没有真正考虑过一个简单的动画左键，这是一个错误的答案，请在发布之前检查一下。你看过JSFiddle吗？是的，我知道。只需做一个滚动和检查，火箭将放在上面的文字内容。检查最后一部分，火箭不见了。据我所知，火箭应该在空区，但现在它的所有内容。你现在明白了吗？我刚才演示了如何用动画将火箭从左向右移动，反之亦然。这就是被问到的。火箭甚至都不是visible@AkhilAravind使结果屏幕的分辨率更高现在你的问题和ans有什么区别除了

大屏幕

当我滚动时火箭向左/向右移动，这就是最终目标。以下是我对解决方案的看法：

$(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");
  }
});

    .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;
}