title: How to move fixed div 200px up when reaching the end of the page (when scrolling)?
body: <p>I have a page with two columns(sidebars). </p>
  
  <p>The left one is fixed (contains google ads) and remains nonchanged even when I scroll down the page.</p>
  
  <p>The right one contains posts and is positioned relative so scrolling is ok.</p>
  
  <p>However I have a footer after right column(sidebar). </p>
  
  <p>This footer's width is 100% of the page.</p>
  
  <p>The problem is that the footer goes to the left sidebar when I scrolled to the bottom.</p>
  
  <p><strong>I would like to move the left sidebar 200px to the top when I reach 200px from the end of the page when scrolling down.</strong></p>
  
  <p>And return back when srolling back to the top.</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="left"&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 here
  &lt;/div&gt;
  </code></pre>