javascript - 仅水平滚动一个 div

Question

我需要的是一个带有背景图像的 div 和另一个将水平滚动的 .png 图像。 http://prntscr.com/9d0d25

我需要背景保持固定，并且汽车 X 和 Z 在向下滚动时水平向右移动(在向上滚动时返回左侧)。当汽车看不见时，我希望网站继续垂直滚动到网站的其他内容(以及向上滚动以将 .png 水平向后滚动的 div 时)

html结构是这样的:

<div class="bgimage"> // has a background in css
   <div class="cars">
      <img src="images/cars.png" />
   </div>
</div>
<div class="othercontent">
</div>

但是我几乎没有 JavaScript 经验，所以我不知道如何实现它。

(我在 google 上搜索了视差，但找到的示例仅适用于完全水平或垂直的网站，这些网站的响应速度不太快”

Answer 1

如果您使用 Jquery，您可以使用 $(window).on('scroll', function(){}) 来监视滚动事件

这是我做的一个简单的:

var lastScrollTop = 0;
$(window).on('scroll', function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       //Scrolling Down
       $('.cars').css('left',st + "px");
   } else {
      //Scrolling Up
      $('.cars').css('left', st + "px");
   }       
});

Fiddle