jQuery 动画滚动不会向左/向右移动元素

Question

I have 3 sections. Each section has their height. JSFiddle at the end of the question.

GOAL : I want an img (rocket picture) to follow the user as he scrolls and change positions (slide) from right to left when he scrolls pass a section.

I've managed to make the rocket follow me as I scroll down. Now I want the rocket to slide over to the left when I pass the first section, then slide back right when I pass the second section.

The rocket rotates when the user scrolls pass a section. That works great! But when I want it to slide over to a different side, it only works on the left. I can't get it to go right Here is the jQuery part for moving the rocket :

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

---

Here is the JSFiddle: https://jsfiddle.net/prozik/d7g3wtye/101/

EDIT:

When I create in CSS:

.moveLeft {
  left: 10px;
}

.moveRight {
  right: 10px;
}

And then in jQuery I do:

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

It works. It moves the element right / left. But it blinks the rocket in the position. I need it to slide over to a different slide.

JSFiddlle: https://jsfiddle.net/prozik/d7g3wtye/113/

Answer 1

All you have to do is reset the the appropriate 'right' or 'left' property when changing the latter. The 'left' and 'right' CSS properties are different so if you don't reset one of them, the other will be ignored.

You can do that by using the 'intial' value for the 'left' and 'right' properties:

$('.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

Here is one solution I found out.

I've added left: 570px to the rocket class in the CSS and then when I call the class moveLeft it moves the rocket:

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

Solution: https://jsfiddle.net/prozik/d7g3wtye/122/