水平滾動一個div

Question

我需要的是有一個帶有背景圖像的div和另一個將水平滾動的.png圖像。 http://prntscr.com/9d0d25

我需要背景保持固定，並且X和Z汽車在向下滾動時向右水平移動（在向上滾動時向左移動。當看不見汽車時，我希望網站繼續垂直滾動到另一個）網站內容（以及向上滾動以使div與.png一起水平向后滾動時）

html結構是這樣的：

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

但是我幾乎沒有JavaScript的經驗，所以我不知道如何實現。

（我用視差進行了搜索，但發現的示例僅適用於水平或垂直網站，但響應速度不是很好”

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

小提琴

Answer 2

鼠標滾輪運動

    var mouseWheelEvt = function (event) {
    if (document.body.doScroll)
        document.body.doScroll(event.wheelDelta>0?"left":"right");
    else if ((event.wheelDelta || event.detail) > 0)
        document.body.scrollLeft -= 10;
    else
        document.body.scrollLeft += 10;

    return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);