【问题标题】:How to synchronize the scrolling between two columns如何同步两列之间的滚动
【发布时间】:2014-09-09 09:12:43
【问题描述】:

我需要关于如何创建与包含在我的主页中的侧边栏相关的代码的建议。

我的主页由以下部分组成:页眉、左侧边栏、主栏(即侧边栏右侧)和页脚。

我需要的有点具体,确实我试图搜索它,通过谷歌、Stackoverflow 和许多其他网站一次又一次地搜索,但不幸的是我没有找到适合我的东西。我找到了一些有用的建议、几个实际示例和许多起点,我尝试并再次尝试将这些代码的各个部分相互混合,但没有得到我真正需要的东西。所有这一切都是因为我认为我的要求有点具体,我会尽力解释它,希望尽可能清楚。

在我的情况下,我不必只修复一个列,因为我发现了很多关于此的示例,如上所述。在我的情况下,我需要将左侧边栏滚动与主列滚动“同步”。

Facebook 中有类似的东西,如果你进入你的个人资料页面,你可以找到与我需要的类似的东西。顺便说一句,我试图在下面解释它,希望尽可能清楚:

  • 当我滚动页面时DOWN我需要左侧边栏和主栏一起向下滚动,直到左侧边栏显示LAST strong> 包含在其中的可见元素。此时滚动应该只继续向下滚动主列

  • 反之亦然,在我滚动页面时 UP 我需要左侧边栏和主列一起向上滚动,直到左侧边栏显示 包含在其中的第一个可见元素。此时滚动应该只继续向上滚动主列

进一步说明:主列(不是左侧边栏,而只是主列)是动态的,换句话说,它动态显示提要,并立即增加其高度。

希望能把事情解释清楚,谢谢大家的帮助!

【问题讨论】:

  • 粘性侧边栏可能是您正在寻找的术语。为此尝试一些插件。或者您必须通过监听滚动事件并计算每个滚动上的元素位置来添加自定义代码。
  • 你想要像getbootstrap.com/getting-started 这样的东西吗?侧边栏根据左侧的内容滚动

标签: javascript jquery html css phpfox


【解决方案1】:

这是一个 jQuery 插件,似乎可以满足您的需求:

http://leafo.net/sticky-kit/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-16
    • 1970-01-01
    • 1970-01-01
    • 2012-08-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多