在滚动时水平移动图像，然后停止答案

【问题标题】：On scroll move image horizontally, then stop在滚动时水平移动图像，然后停止
【发布时间】：2017-01-04 08:35:44
【问题描述】：

我可以很容易地垂直移动图像，但是如何使用我的方法水平移动它呢？一旦我到达某个点，我也希望图像停止朝那个方向移动，我不知道该怎么做，也许我可以改变它的 css 以在我得到这么多像素后保持在一个位置。

下面的代码是垂直移动的，我可以用类似的简单方法来水平移动图像吗？

代码：

$(window).on("scroll", function() {
  var wScroll = $(this).scrollTop();

  $('.planeImg').css({'transform' : 'translate(-50%, -'+ wScroll /2 +'%)'})

});


.planeImg {
   position: absolute;
   display: block;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: url("../images/plane.png");
   background-size: contain;
   background-repeat: no-repeat;
   z-index: 99;
   height: 80px;
   width: 300px;
}

【问题讨论】：

你检查过这个answer吗？
我建议你直接使用Scroll()。
你可以试试 $('.planeImg').css({'transform' : 'translate( -'+ wScroll /2 +'%, -50%)'})

标签： javascript jquery html css

【解决方案1】：

效果很好。

$('.planeImg').css({'transform' : 'translate( -'+ wScroll /2 +'%, -50%)'})

【讨论】：