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

时间:2012-06-12 11:36:23

标签: jquery scroll fixed

我非常感谢任何jquery专家帮助作为我之前使用过的方法,对于这个新应用程序并不是很有效。

我想要实现的目标

我的网站包装器的右侧和左侧有两个选项卡,只有在您向下滚动页面时才会显示。当标签到达屏幕中心时,它们将变为固定位置,然后出现锁定位置。请参阅下面的一般效果/想法......

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


问题

你可能想知道为什么我问这个小提琴是否已经起作用了。

以上小提琴起作用,因为它适用于从窗口顶部滚动到位置。

但在我的网站上,这些标签只存在于内容区域上,无法在我的标题,横幅,幻灯片区域上方运行。

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

请看下面的小提琴有不同的布局组合,然后你会看到我的问题。

请注意我删除了标签容器列上的橙色背景,以便您可以看到设计观点。

  1. 标题,导航,幻灯片,广告 - http://jsfiddle.net/motocomdigital/SGCHt/3/
  2. 标题,导航,广告 - http://jsfiddle.net/motocomdigital/SGCHt/4/
  3. 标题,导航 - http://jsfiddle.net/motocomdigital/SGCHt/5/
  4. 现在看下面的小提琴,它在标签容器列上有橙色背景,这样你就可以看到标签如何只出现在内容区div旁边的结构。

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


    当脚本从屏幕顶部达到50%时,脚本需要如何向标签添加固定定位。但我不知道如何计算这个,因为标签容器不会一直运行到窗口顶部。是否有另一种实现此目的的脚本方法?

    任何帮助都会非常感激。谢谢!

1 个答案:

答案 0 :(得分:6)

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

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