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的经验，所以我不知道如何实现它。

（我用谷歌搜索视差，但只找到了完全水平或垂直的网站的例子，这些网站并没有很好的响应能力＃34;

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

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

水平滚动一个div

2 个答案: