title: Add 1px of Padding(bottom) for Every 1px Scrolled – jQuery or Javascript
body: <p>I'm setting up an animation so that when a user scrolls, after 10px the menu disappears to the left (easy enough thus far).  I would like it so the menu container appears 'fixed' vertically whilst it scrolls horizontally to the left.  I have figured that if I create a loop which adds 1px of padding-bottom to the container for every px scrolled this will create this effect (i can't use position: fixed; because this will prevent the horizontal animation).  </p>
  
  <p>I've never approached anything like this before, although I realise I'll need some form of counter to create the px value and then convert into a paddingBottom value. </p>
  
  <p>I've set up the animation so it triggers on scroll, but I seem to be getting absolutely nowhere in terms of how to adding the padding value incrementally.</p>
  
  <p>The code snippet is showing things thus far, but any pointers on how to achieve the above would be amazing.  </p>
  
  <p>Emily.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready (function($){
  
    $(window).scroll(function() {
   if ($(document).scrollTop() &gt; 10) {
     $('.mydiv').css('left', '-100px');
   } else {
     $('.mydiv').css('left', '0px');
   }
   });
  
  var divHeight = $('.mydiv').height(),
      scrollTop = $('.mydiv').scrollTop();
  
   for (i=0; i &lt; scrollTop.length; i++) {
  
     var divPaddingBottom = 0;
  
   }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {height: 200vh; padding: 0; margin: 0;}
  
  .mydiv {
    position: absolute;
    width: 100px;
    height: 100vh;
    background-color: red;
    transition: .5s all;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="mydiv"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>