title: Div that follows you down the page within dynamic boundaries
body: <p>I'm trying to get a form to follow down the page as a viewer scrolls, but stop once reaching the end of the container div (versus continuing into the footer). I got it to work, sort of. It follows me down the page but only a little bit, then stops. I'll place the js, css and html I'm using. <a href="http://i.stack.imgur.com/9PrZ6.jpg" rel="nofollow">1</a></p>
  
  <pre><code>$().ready(function() {
                  var $scrollingDiv = $('#scrollingDiv'); //scrolling div
                  var position = $('#endScroll').position(); // div before you want to stop
                  var height = $('#page-sidebar').height(); //scrolling div can have dynamic height
                  var pos = position.top-(height+5);
  
                  $(window).scroll(function(){
                      if($(window).scrollTop() &gt; 200 &amp;&amp; $(window).scrollTop() &lt; pos){ //100 is value after it start moving when scrooling
                      $scrollingDiv.stop()
                      .animate({'paddingTop':($(window).scrollTop() - 350) + 'px'}, 'slow');
                  }
              });
          });
  
  
  aside#with-sidebar {
      width:35%;
      float:right;
  }
  
  
  
  
  &lt;aside id="with-sidebar"&gt;
     &lt;div id="scrollingDiv"&gt;
            &lt;form id="form-appointment"&gt;...&lt;/form&gt;
      &lt;/div&gt;
  &lt;/aside&gt; 
  </code></pre>