title: Animate div to top on scroll (as parallax)
body: <p><a href="https://i.stack.imgur.com/BKEt6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKEt6.png" alt="My website"></a></p>
  
  <p>I have stacked divs with different colors as in the image, each <code>div</code> is having height as 40% of window height, but are set to negative value on top position so creates an illusion of stacked divs.</p>
  
  <p>What I want is to animate these div's on scrolling, i.e. I want to reveal bottom <code>div</code>s on scroll and that to scrolling it to large extend with an fixed height of container <code>div</code> (set to <code>height</code> of window) just like that of parallax effect.</p>
  
  <p>How can I achieve this?</p>
  
  <p>What I have done so far is:</p>
  
  <pre><code>var position = $('.panel-wrapper').scrollTop();
  $('.panel-wrapper').bind('mousewheel DOMMouseScroll', function (e) {
  //alert('here');
  
  var scroll = $('.panel-wrapper').scrollTop();
  //console.log(scroll);
  if (scroll &gt; position) {
      // console.log(parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true)));
      // console.log(parseInt(panel_top_position[0]) + parseInt(50));
      if (((parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true))) &gt;= (parseInt(panel_top_position[0]) + parseInt(50)))) {
          $('.branding-panel').css('top', parseInt($('.branding-panel').css('top')) - parseInt(100));
      }
      else if (((parseInt($('.advertising-panel').position().top) + parseInt($('.advertising-panel').outerHeight(true))) &gt;= (parseInt(panel_top_position[1]) + parseInt(50)))) {
          $('.advertising-panel').css('top', parseInt($('.advertising-panel').css('top')) - parseInt(200));
      }
      else if (((parseInt($('.interactive-panel').position().top) + parseInt($('.interactive-panel').outerHeight(true))) &gt;= (parseInt(panel_top_position[2]) + parseInt(50)))) {
          $('.interactive-panel').css('top', parseInt($('.interactive-panel').css('top')) - parseInt(300));
      }
      else if (((parseInt($('.films-panel').position().top) + parseInt($('.films-panel').outerHeight(true))) &gt;= (parseInt(panel_top_position[3]) + parseInt(50)))) {
          $('.films-panel').css('top', parseInt($('.films-panel').css('top')) - parseInt(320));
      }
  
  }
  else {
  
  }
  position = scroll;
  
  });
  </code></pre>
  
  <p>NOTE - I have fixed height as that of my windows and I want to scroll it and reveal other <code>div</code>s.</p>
  
  <p>Please help.</p>
  
  <p>Krunal</p>