Change margin-top position of an fixed positioned element after reaching the bottom of the page?
<p>I need to change top-margin of an fixed div element from margin-top: 200px to margin top 0px after reaching the bottom of the page (or 200px from bottom) using vertical scrollbar.</p>

<p>And toggle return back if scrolling back to the top.</p>

<p>I guess some javascript/jQuery code code do that.</p>

<p>my html/layout code:</p>

<pre><code>&lt;div id="header" style="position: fixed; margin-top: 0px;"&gt;
     Header content
&lt;/div&gt;
&lt;div id="main"&gt;
    &lt;div id="left" style="position: fixed; margin-top: 200px;"&gt;Google Ads here&lt;/div&gt;
    &lt;div id="right"&gt;Content posts here&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
    Footer content
&lt;/div&gt;
</code></pre>

<p><strong>EDIT: Here are some images to make my question more clear.</strong></p>

<ol>
<li><p>normal state when you load the page:
<img src="http://i.stack.imgur.com/DIbPl.png" alt="enter image description here"></p></li>
<li><p>problem when you scroll down, and the google ads column is in conflict with footer:
<img src="http://i.stack.imgur.com/nlhJ4.png" alt="enter image description here"></p></li>
<li><p>how it needs to be solved:
<img src="http://i.stack.imgur.com/In2sx.png" alt="enter image description here"></p></li>
</ol>
