当div到达屏幕位置时jquery修复div位置，而不是滚动位置

Question

我真的很感谢任何 jquery 专家的帮助，因为我以前使用过的一种方法不太适合这个新应用程序。

我想要实现的目标

我的网站包装器的右侧和左侧有两个选项卡，只有当您向下滚动页面时它们才可见。当标签到达屏幕中心时，它们就会变成固定位置，看起来锁定在适当的位置。请参阅下面的总体效果/想法...

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

问题

您可能想知道如果上面的 fiddle 已经可以工作，为什么我要问这个问题。

上面的 fiddle 有效，因为它适用于从窗口顶部滚动到的位置。

但在我的网站上，这些选项卡仅存在于内容区域上，并且无法运行到我的标题、横幅、幻灯片区域上方。

在上面的 jsFiddle 示例中，您会注意到没有标题、横幅或幻灯片。因此，这对于我当前的脚本来说不是问题，因为选项卡容器列一直运行到顶部。

请查看下面具有不同布局组合的 fiddle ，然后您就会看到我的问题。

请注意，我删除了选项卡容器列上的橙色背景，以便您可以看到设计观点。

1. 标题、导航、幻灯片、广告 - http://jsfiddle.net/motocomdigital/SGCHt/3/
2. 标题、导航、广告 - http://jsfiddle.net/motocomdigital/SGCHt/4/
3. 标题，导航 - http://jsfiddle.net/motocomdigital/SGCHt/5/

现在看看下面的 fiddle ，它在选项卡容器列上有橙色背景，这样您就可以看到选项卡如何只能出现在内容区域 div 旁边的结构。

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

解决方案

当点击距离屏幕顶部达到 50% 时，脚本需要向选项卡添加固定定位。但我不知道如何计算这个，因为选项卡容器不会一直运行到窗口顶部。是否有其他脚本方法可以实现此目的？

任何帮助将不胜感激。谢谢!

Answer 1

我们可以从顶部添加内容区域的位置，而不是看着滚动达到屏幕高度的 50%。

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