title: Full viewport height image with parallax scrolling
body: <p>I wish for certain sections of a page to fill out <strong>at least 100% of the viewport height</strong> regardless of the screen size. I also want the content and background of sections to <strong>scroll with a parallax effect</strong>.</p>
  <p>I have jQuery on the page and use the following to resize the section <code>.parallax</code> to full viewport height:</p>
  <pre><code>var imageFit = function() {
    windowHeight = $(window).height();
    $('.parallax').css('min-height', windowHeight);
  };
  
  $(document).ready(imageFit);
  $(window).resize(imageFit);
  </code></pre>
  <p>I'm aware of the units <code>vh</code> and <code>vw</code> but I don't want to use them because of poor browser support. <em>(By the way, I'm really bad at javascript so please help me improve this if possible).</em></p>
  <hr />
  <p><strong>Here's a pen with the 100% viewport height section: <a href="http://codepen.io/Mest/full/GpycL" rel="nofollow noreferrer">http://codepen.io/Mest/full/GpycL</a></strong> <em>(If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).</em></p>
  <p>This works fine, however I'm not how  to implement the parallax effect. I've tried using <a href="https://github.com/Prinzhorn/skrollr" rel="nofollow noreferrer">Skrollr</a> to modify CSS properties in order to create the parallax effect. However since my <code>section</code> gets it's full viewport height <code>height</code>-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax &quot;transition&quot; to occur instantly as I scroll. It works great without the resizing script above.</p>
  <p>Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of <em>X</em> px in my CSS and then Skrollr functioned as it should while scrolling for the first <em>X</em> px.</p>
  <h2>Thus, my question is the following:</h2>
  <p>How can I make Skrollr recognize the <code>height</code> set by the script above?</p>
  <p>or,</p>
  <p>Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?</p>