编辑：

Question

因此，我试图让元素“堕落”。来自名为z-index的较高fallingfruit_header的div下方。如果可能的话，我希望fallingfruit div以不同的速度滚动，然后停在页脚。

我的主要问题是我有各种视差元素，我发现很难处理滚动，特别是滚动触发divs向下移动滚动。我已尝试使用position: fixed;，但它位于position: relative div上，因此无效。事实上，现在我无法让下降的div显示出来！

对可能有帮助的消息来源的任何帮助，建议或指示都会非常棒。我使用waypoints.js来触发滚动事件，如果可能的话继续使用它会很棒。我也使用sticky.js作为粘性导航栏。

所以只是为了澄清一下，我希望div通过滚动引起的页脚落在#parallax_content之上，但在navbar #parallax_content和{{1 }}

My CodePen so far

编辑：

Similar to this但是通过滚动来控制，而不是像这个例子那样由jQuery生成。这只是展示了我希望实现的动议。

编辑2：

我已经重新编写了代码，现在有了我喜欢的div＆＃39; fall＆＃39;从绿色div后面。但是，我希望它们会根据滚动速度以不同的速度下降，而不是像雪效果那样自动化。重新编写的代码与上面相同。

Answer 1

使用纯 CSS

进行更新

<强> CSS

   .fallingfruit_header {
    width: 100%;
    height: auto;
    margin: 0 auto;
  background-color: #6b92b9;
    background-image: url('http://pre11.deviantart.net/cbce/th/pre/i/2013/064/7/3/raindrops_simple_vector_by_lktronikamui-d5x2tp7.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
    padding: 200px 0;

}

<强> JS

function wheel(event) {
      var delta = 0;
      if (event.wheelDelta) {(delta = event.wheelDelta / 120);}
      else if (event.detail) {(delta = -event.detail / 3);}

      handle(delta);
      if (event.preventDefault) {(event.preventDefault());}
      event.returnValue = false;
  }

  function handle(delta) {
      var time = 1000;
      var distance = 300;

      $('html, body').stop().animate({
          scrollTop: $(window).scrollTop() - (distance * delta)
      }, time );
  }

if (window.addEventListener) {window.addEventListener('DOMMouseScroll', wheel, false);}
    window.onmousewheel = document.onmousewheel = wheel;

以不同的速度滚动事件。

DEMO

jQuery：如何让div向下移动。航点和Z指数

编辑：

编辑2：

1 个答案: