title: Set div width based on scroll position
body: <p>The code:
  <a href="http://codepen.io/anon/pen/EjrpMM" rel="nofollow">http://codepen.io/anon/pen/EjrpMM</a></p>
  
  <p>So, i'm working on an interesting problem. I am working with a 2000px HTML document, that has a modal placed ontop of it.</p>
  
  <p>The width of the div lightbox is 80%, and it's sitting positioned fixed.</p>
  
  <p>The goal is, when scrolling down the page, to control the width of the div based on the scroll position. At the bottom of the page, it's only a third in size.</p>
  
  <p>I've had trouble figuring out the proper equation or formula for this, and was seeking help. </p>
  
  <p>Currently, I've been trying to look at the window.pageYOffset, to add 2.5% to the div while increasing, and minus 2.5% when scrolling back up, to bring it back to it's 80% width.</p>
  
  <p>However, something isn't working right. I was seeing if the community had any ideas to help solve the problem.</p>
  
  <p>I'm not using any frameworks for this.</p>
  
  <p>Here's my javascript:</p>
  
  <pre><code>var lightBox = document.getElementById('lightBox'),
  count = 80,
  num = window.pageYOffset;
  
  document.addEventListener('scroll', function(e) {
    var offset = window.pageYOffset;
  
    num &gt;= offset ? count += 2.5 : count -= 2.5;
    num = offset;
  
    lightBox.style.width = count + '%';
  });
  </code></pre>
  
  <p>View the code here, in this codepen</p>
  
  <p><a href="http://codepen.io/anon/pen/EjrpMM" rel="nofollow">http://codepen.io/anon/pen/EjrpMM</a></p>
  
  <p>Thank you!</p>