title: Scrolling floating/sliding sidebar issue
body: <p>I've looked through all stuff in here related to what I'm facing, but still can't get it fixed.</p>
  
  <p>What I'm trying to do:</p>
  
  <ol>
  <li>Get a sidebar navigation to float as the user scrolls up/down the page.</li>
  <li>To have the sidebar centrally stopping so that all elements can be seen and clicked.</li>
  </ol>
  
  <p>What I'm getting: </p>
  
  <ol>
  <li>Sidebar follows scrolling just fine when scrolling down (centralised view), but when scrolling up, only half of the sidebar is displayed when the page is scrolled up too fast.</li>
  <li>When scrolling down the page, the sidebar will push the footer further below without end.</li>
  <li>The sidebar will not lock back into its original position when the page is scrolled all the way up from the bottom. There seems to be a slight gap.</li>
  </ol>
  
  <p><a href="http://demo.blufroge.com/index.php?m=main&amp;c=show_shopping_details_all&amp;subCateId=2" rel="nofollow"><strong>Demo Link</strong></a></p>
  
  <p>Here is the script (modded from the generous Jordon Mears):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function animate_box() {  
  var offset = -15; /* set this to the starting margin-top in the css */  
  var element = document.getElementById('animate_box'); 
  
  if(element) {  
      var top = Number(String(element.style.marginTop).substring(0,String(element.style.marginTop).indexOf('px')));
  
      try {  
          if(document.body.scrollTop &gt; 500) {  
              var difference = (document.body.scrollTop + offset);
          } else if(document.documentElement.scrollTop &gt; 0) {  
              var difference = (document.documentElement.scrollTop + offset);
  
          } else {  
              var difference = offset;  
          }  
      } catch(e) {  
          var difference = offset;  
      }  
  
      difference = difference - top;  
  
      if(difference &gt; 200) {  
          element.style.marginTop = (top + Math.abs(Math.ceil(difference / 30))) + 'px';  
      } else if(difference &lt; 190) {  
          element.style.marginTop = (top - Math.abs(Math.ceil(difference / 30))) + 'px';  
      }  
  }  
  }  
  window.setInterval(animate_box, 50);
  &lt;/script&gt;
  </code></pre>