title: how to stick the footer to the bottom of the page while moving it upward in a parallax-like effect?
body: <p>I have a project where the requirement is to move the footer ( <code>#footer</code> ) upward while scrolling down the page in a parallax-like effect. When you start scrolling down the page, the footer should start moving upward only until it's visible in the (bottom part of the) viewport.</p>
  
  <p>The footer should have covered most of the preceding <code>&lt;div&gt;</code> half way up and in full when it has reached the top of the viewport.</p>
  
  <p>The page may have a similar html structure like this :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="sectionA" class="div"&gt;First section&lt;/div&gt;
      &lt;div id="sectionB" class="div"&gt;Second section&lt;/div&gt;
      &lt;div id="sectionC" class="div"&gt;Third section
          &lt;div class="box"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer" class="div cf"&gt;Footer&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The parallax-like effect is achieved via javascript/jQuery adding a dynamic <em>negative</em> value to the <code>top</code> CSS property of the (relative positioned) footer. Here is the code for what it matters :</p>
  
  <pre><code>var $window = jQuery(window),
      $footer = jQuery("#footer"),
      $viewport = window.innerHeight,
      $startEffect = $footer.offset().top - $viewport;
  
  function footerParallax() {
      var $scrollPos = $window.scrollTop() - $startEffect,
          $ratio = 0.6;
      $footer.css({
          top: -($scrollPos * $ratio)
      });
  }
  
  $window.scroll(function () {
      footerParallax();
  });
  </code></pre>
  
  <p>The (obvious) issue is that as soon as the <code>top</code> property starts getting a <em>negative</em> value, the footer starts moving away from the bottom of the page.</p>
  
  <p>I have prepared a <strong><a href="http://jsfiddle.net/cnRsr/" rel="noreferrer">JSFIDDLE</a></strong> and assigned colors to each section and <code>body</code> to make it clearer. The <code>body</code> (dark-red) is visible under the footer after scrolling to the bottom.</p>
  
  <p>What have I tried?</p>
  
  <ul>
  <li>modifying the <code>margin-top</code> instead of the <code>top</code> property:  <em>this does the trick, however the preceding <code>&lt;div&gt;</code> that has to be covered by the footer (<code>#sectionC</code> in the example above) overlaps the contents of the footer and breaks its layout regardless that it is not visible due to its <code>z-index</code> property (added some floating boxes in the fiddle to make it evident.... a clearfix hack didn't help either.)</em></li>
  <li>setting a <code>static</code> position to the footer: <em>neither <code>top</code> or <code>margin-top</code> have effect over a <code>static</code> element.</em></li>
  <li>Changing/reducing dynamically the <code>height</code> of <code>#sectionC</code> instead of <code>top</code> of footer to produce the effect of moving the second upwards :  <em>the footer stops moving as soon as <code>height</code> is equal to <code>0</code> (neither negative size or negative paddings are allowed)</em></li>
  <li>Changed the <code>height</code> dynamically of the <code>html</code> and/or <code>body</code> tags to no avail. </li>
  </ul>
  
  <p>I have also tried some parallax plugins like <a href="https://github.com/Prinzhorn/skrollr" rel="noreferrer">skrollr</a> and <a href="https://github.com/Prinzhorn/skrollr-stylesheets" rel="noreferrer">skrollr-stylesheets</a> and some others.</p>
  
  <p>The problem with this solution (same with others) is that it relays in an specific (offset) position of the footer measured in px and set in a <code>data</code> attribute, but if the content changes dynamically, for example using the masonry plugin to arrange elements in another section of the document, the measures become inaccurate and the footer may start moving too early or too late.</p>
  
  <p>By the way, other CSS sticky-footer techniques won't work because, well, they actually push the footer to the bottom of the page, and here we are doing the opposite.</p>
  
  <p>I guess the question is either : </p>
  
  <ul>
  <li>how to keep the footer stick to the bottom of the page while it is moved upwards? - or -</li>
  <li>how to reduce the gap to <code>0</code> between the end of the document and the bottom edge of the footer?</li>
  </ul>
  
  <p>I am starting to think that this issue has not a real solution the way it is, or maybe I am already too tired to see the obvious. I am interested in learning alternative solutions or hacks via CSS / javascript / jQuery or all of the above.</p>
  
  <p>Bear in mind that I am not asking how to create the parallax effect UNLESS a totally different approach (or tweaks to the existing js code) solves the position issue.</p>
  
  <p><strong>IMPORTANT</strong> : Please consider that this is a WP site with an <code>XHTML 1.0 Transitional DOCTYPE</code>, and has installed many other jQuery plugins like masonry, scrollTo, jQuery UI, etc.  I may have not control to change many things from the original structure (and I don't want to) so the idea is to implement this without breaking too many things and from a modular script.</p>
  
  <p><strong>EDIT #1</strong> : Added a graphic to clarify the question.</p>
  
  <ul>
  <li><p><strong>Figure A</strong>. shows a regular web page scrolled down to the end. The red square represents the viewport and the footer (grey) is slighted moved to the right for illustration purposes. The <code>body</code> has a reddish background color (not visible in normal conditions) just for illustration purposes too. <strong>NOTE</strong>: the <code>height</code> of each section as well as the <code>height</code> of the footer is determined by their content (forms, images, text, etc.) so is NOT fixed.</p></li>
  <li><p><strong>Figure B</strong>. shows the current issue: If footer slides up in a parallax-like effect (see <strong><a href="http://jsfiddle.net/cnRsr/" rel="noreferrer">JSFIDDLE</a></strong> for reference) while scrolling down the page, it starts covering any preceding section above it (WITHOUT modifying neither its own <code>height</code> or the <code>height</code> of the preceding sections) AND it also starts separating itself from the bottom of the page, therefore the <code>body</code>'s color background becomes visible. <strong>NOTE</strong>: the bigger the viewport is (fullscreen mode for instance) the higher the footer is moved upward (and more content is covered by it)</p></li>
  <li><p><strong>Figure C</strong>. is the expected result: the footer should be stuck to the bottom of the page, in other words, it should be the last visible element after the page has been totally scrolled down (and not the body background as in Figure B.) <strong>Notice</strong> that the contents and the size of each section (including the footer) should (ideally) remain untouched. Having said that, adding padding bottom to the footer or increasing its height is not the expected result since it would break its original visual layout.</p></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/fUDFf.jpg" alt="enter image description here"></p>