title: Change margin-top position of an fixed positioned element after reaching the bottom of the page?
body: <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="https://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="https://i.stack.imgur.com/nlhJ4.png" alt="enter image description here"></p></li>
  <li><p>how it needs to be solved:
  <img src="https://i.stack.imgur.com/In2sx.png" alt="enter image description here"></p></li>
  </ol>