jQuery : div를 아래로 이동하는 방법. 웨이 포인트와 Z- 인덱스

Question

그래서 나는 div25 아래에있는 z-index에있는 요소를 ''이라고 부르려고합니다. 가능하다면 fallingfruit div를 다른 속도로 스크롤 한 다음 바닥 글에서 중지하고 싶습니다.

내 주된 문제는 필자가 다양한 시차 요소를 가지고 있으며 스크롤과 특히 스크롤이 div 스크롤을 스크롤과 함께 아래쪽으로 움직이게하는 것이 어렵다는 것을 발견했습니다. position: fixed;을 사용해 보았지만 position: relative div에 있으므로 작동하지 않습니다. 사실, 지금 당장 나는 떨어지는 div를 보여줄 수 없습니다!

도움이되는 도움, 조언 또는 지침이 환상적 일 수 있습니다. 나는 waypoints.js를 사용하여 스크롤링 이벤트를 트리거하고 가능한 경우 계속 사용하는 것이 좋습니다. 또한 sticky.js를 끈적한 navbar로 사용하고 있습니다.

그래서 그냥 내가 div의 그 스크롤에 의해 트리거 바닥 글에 가을이있는 #parallax_content 이상하지만 navbar#parallax_content 및 about-section

My CodePen so far

편집 아래에 간다 찾고 있어요 명확히 :

Similar to this하지만이 예제와 같이 jQuery에 의해 생성되지 않는 스크롤링에 의해 제어됩니다. 이것은 내가 성취하고자하는 움직임을 보여주는 것일뿐입니다.

편집 2 :

나는 코드를 재 지금은 녹색 DIV 뒤에서 '가을'좋아하는 div의가있다. 그러나 나는 스크롤에 따라 다른 속도로 떨어지기를 기대했지만 눈 효과와 같이 자동화 된 것은 아닙니다. 재생성 된 코드는 위와 같습니다.

Answer 1

UPDATE 순수한 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