How to move fixed div 200px up when reaching the end of the page (when scrolling)?

Question

I have a page with two columns(sidebars).

The left one is fixed (contains google ads) and remains nonchanged even when I scroll down the page.

The right one contains posts and is positioned relative so scrolling is ok.

However I have a footer after right column(sidebar).

This footer's width is 100% of the page.

The problem is that the footer goes to the left sidebar when I scrolled to the bottom.

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.

And return back when srolling back to the top.

<div id="main">
    <div id="left">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    footer here
</div>

Answer 1

You can use jQuery scroll . most websites use this to load content for their sites.

   $(window).scroll(function(){  

        if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
            setLeftBarPosition();
        }
    });

   function setLeftBarPosition(){
    // your code to set position of lefftbar

  }

Answer 2

You can do this using plain CSS instead of javascript.

Read this for details. A Demo here