title: Jquery Scrolling div - Prevent from entering site footer
body: <p>I have a side menu on my site that i would like always visible.<br>
  To accomplish this, I am using the following code sample from this page:</p>
  
  <p><a href="http://camwebdesign.com/demos/jquery-scrolling-element.html" rel="nofollow">http://camwebdesign.com/demos/jquery-scrolling-element.html</a></p>
  
  <p>The problem is that unlike the sample my site has a huge 1000px height footer.
  When the user scrolls the content over the footer div, the side menu overlaps it.
  Is there a way to modify the Jquery code where it has a boundry of 1000px on the bottom to prevent this?</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;html&gt; 
  
  &lt;title&gt;Keep element in view while scrolling using JQuery&lt;/title&gt; 
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=CDN"&gt;&lt;/script&gt; 
  &lt;script&gt; 
      $().ready(function() {
          var $scrollingDiv = $("#scrollingDiv");
  
          $(window).scroll(function(){            
              $scrollingDiv
                  .stop()
                  .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
          });
      });
  &lt;/script&gt; 
  &lt;div style="float: left; width: 70%"&gt; 
  
  &lt;h1&gt;Keep element in view while scrolling using JQuery&lt;/h1&gt; 
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="scrollingDiv" style="position: absolute;   top: 32px; right: 16px; width: 21%; padding: 0% 2% 2% 2%; border: 2px solid red; background-color: #ffeaea;"&gt; 
      &lt;h2&gt;Scrolling Element&lt;/h2&gt; 
      Scroll down/up to see me smoothly reposition myself and keep in view.&lt;br /&gt;&lt;br /&gt; 
  
      &lt;em&gt;Smooooooooooooooooooth&lt;/em&gt;&lt;br /&gt; 
  
  &lt;/div&gt; 
  
  
   &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
   &lt;div id="footer" style="width:100%; height:1000px; background:#333; color:#FFF;" &gt;
   &lt;h1&gt;Footer&lt;/h1&gt;
  
  
  
  
  
   &lt;/div&gt;
  </code></pre>