javascript - jQuery : How to make divs move down. 航点和 Z-index

Question

所以我试图让元素从一个名为 fallingfruit_header 的更高 z-index 的 div 下“下降”。如果可能的话，我希望 fallingfruit div 以不同的速度滚动，然后停在页脚处。

我的主要问题是我有各种视差元素，我发现很难使用滚动，尤其是触发 div 随着滚动向下移动的滚动。我试过使用 position: fixed; 但它在 position: relative div 上所以它不起作用。事实上，现在我连下降的 div 都无法显示!

任何可能有帮助的资源的帮助、建议或方向都是非常好的。我正在使用 waypoints.js 来触发滚动事件，如果可能的话继续使用它会很棒。我还使用 sticky.js 作为粘性导航栏。

所以澄清一下，我希望让 div 落到通过滚动触发的页脚，滚动在 #parallax_content 之上但在 navbar 之下 # parallax_content 和about-section

My CodePen so far

编辑:

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

编辑 2:

我重新编写了代码，现在我喜欢的 div 从绿色 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