JQuery captures the position of the div when the div reaches the screen position, not the scroll position

Question

JQuery captures the position of the div when the div reaches the screen position, not the scroll position

I would really appreciate any useful jquery help as the method I used earlier does not quite work for this new application.

WHAT I TRY TO ACCESS

I have two tabs on the right and left side of the cover of my website, which become visible only when scrolling the page. And when the tabs reach the center of the screen, they become fixed and then locked in position. See general effect / idea below ...

http://jsfiddle.net/motocomdigital/SGCHt/2/

PROBLEM

You might be wondering why I am asking if the above fiddle works.

The above fiddle works because it works in the scroll position at the top of the window.

But on my website, these tabs exist only in the Content area and cannot work higher in my header, banner, slide show areas.

In the jsFiddle example above, you will see that there are no headers, banners or slide shows. So this is not a problem for my current script, because the columns of the tab container work to the end.

Please browse scripts that have different layout combinations and you will see my problem.

Note that I removed the orange background in the columns of the tab container so that you can see the design point of view.