title: How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located
body: <p>I am trying to create a button that is fixed on the lower-left side of the screen. I tried to setup in JSFiddle to recreate what I'm trying to do.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;header
  &lt;/div&gt;
  &lt;div id="button"&gt;button
  &lt;/div&gt;
  &lt;div id="content"&gt;some content
  &lt;/div&gt;
  &lt;div id="footer"&gt;footer
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#header,#footer{
  background-color:red;
  
  
  
  }
  #content
  {
      height:2000px;
  }
  #footer
  {
      height:200px;
  }
  #button
  {
      background-color:gray;
      width:100px;
      height:100px;
      position:fixed;
      bottom:0;
      left:0;
      right:0;    
  }
  </code></pre>
  
  <p>I have read that, I should use plugins such as scrolltoFixed.js, lockfixed.js
  but my problem is I don't know how to use or even where to start editing the javascript.
  <a href="http://jsfiddle.net/TjNmj/" rel="nofollow">Here is a fiddle</a></p>
  
  <p>I want the button to stop where the footer is, and make it like it was docked.</p>