Synchronized scrolling between nested divs

Jumping off a previous thread: Synchronized scrolling using jQuery?

I am trying to synchronize my vertical scrolling across a couple of nested divs. The div hierarchy (as of now) is as follows:

container
    |__  content (width:75%; overflow-y:scroll; height:500px;)
    |__  sidebar (width:25%; position:absolute; right:0; height:500px;)
    |__  footer (width:100%;)

Here is the JSFiddle of what I have so far.

I'm currently using scrollTop to try to solve my problem. I'm running into trouble when there's overflow content in my nested div (in this case, the content div). Basically, this is resulting in having two scrollable areas: the container div and the content div within the container.

My problem is when you are are the bottom of the scroll height for both the content and the container. From here, what I want to happen is to have the footer scroll out of view when you scroll up no matter where the cursor is.

As it currently stands, when you scroll up from the bottom of the document, with the cursor on the content div, the container div stays put until you hit the top of the content div's scroll height. I want the container to basically scroll back up with the content div, so the footer goes out of view as you scroll back up through the content div.

The StackOverflow question page is actually a good example of what I'm looking for (but with the Similar Questions sidebar stopping at the footer).

Sorry if this is hard to follow, appreciate any help here.

PS. I know there are probably workarounds (like taking the sidebar out of the container) but the website I'm trying to put this into effect with is more complicated and I need the divs nested in this way.