title: Stop fixed position at footer
body: <p>I'm looking for a solution to the popular issue of stopping a fixed object at the footer of the page.</p>
  
  <p>I basically have a fixed "share" box in the bottom left corner of the screen and I don't want it to scroll over the footer, so I need it to stop about <code>10px</code> above the footer.</p>
  
  <p>I've looked at other questions here as well as others. The closest/most simple demo I could find is <a href="http://jsfiddle.net/bryanjamesross/VtPcm/">http://jsfiddle.net/bryanjamesross/VtPcm/</a> but I couldn't get it to work with my situation.</p>
  
  <p>Here's the html for the share box:</p>
  
  <pre><code>    &lt;div id="social-float"&gt;
          &lt;div class="sf-twitter"&gt;
              ...
          &lt;/div&gt;
  
          &lt;div class="sf-facebook"&gt;
              ...
          &lt;/div&gt;
  
          &lt;div class="sf-plusone"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>...and the CSS:</p>
  
  <pre><code>#social-float{
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 55px;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 5px solid #ccd0d5;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  display: none;
  }
  </code></pre>
  
  <p>The footer is <code>#footer</code> and it doesn't have a fixed height, if that makes any difference.</p>
  
  <p>If someone could assist me in creating a simple jQuery solution for this, I'd much appreciate it!</p>