Question

I would really appreciate any jquery expert help as a method I’ve used previously, is not quite working for this new application.

WHAT I’M TRYING TO ACHIEVE

I have two tabs on the right and left side of my website wrapper, which only become visible as you scroll down the page. And as the tabs reach the center of the screen, they then become fixed position, appearing to then lock in position. See the general effect/idea below…

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

THE PROBLEM

Your probably wondering why I’m asking the question if the above fiddle is already working.

The above fiddle works because it works on scrollto position from window top.

But on my website, these tabs only exist on Content Area, and cannot run above into my header, banners, slideshows areas.

On the above jsFiddle example, you will notice there are no header, banners, or slideshows. So this is not a problem for my current script because the tab container columns run all the way to the top.

Please see the fiddles below which has different combinations of layout and you will then see my problem.

Please note I removed the orange background on the tab container columns so you can see design point of view.

1. Header, Nav, Slideshow, Advert – http://jsfiddle.net/motocomdigital/SGCHt/3/
2. Header, Nav, Advert – http://jsfiddle.net/motocomdigital/SGCHt/4/
3. Header, Nav – http://jsfiddle.net/motocomdigital/SGCHt/5/

Now see fiddle below which has the orange backgrounds on tab container columns so you can see structure of how the tabs can only ever appear next to the content area div.

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

SOLUTION

The script some how needs to add the fixed positioning to the tabs, when the tap reaches 50% from top of screen. But I don’t know how to calculate this as the tab containers do not run all the way to the top of window. Is there another script method of achieving this?

Any help would be so appreciated. Thank you!

Answer 1

Instead of looking at the scroll getting to 50% of the screen height, we can add on the position of the content area from the top.

http://jsfiddle.net/SGCHt/7/