javascript - 如何同步两列之间的滚动

标签 javascript jquery html css phpfox

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

我的主页由:页眉、左侧边栏、主栏(位于边栏右侧)和页脚组成。

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

在我的例子中,我不只是修复一个列,因为我发现了很多上面已经提到的例子。在我的例子中,我需要使左侧边栏滚动与主列滚动“同步”。

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

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

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

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

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

最佳答案

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

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

关于javascript - 如何同步两列之间的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25740797/

相关文章:

JavaScript 的 String.trim 等价物?

javascript - 在 JsFiddle 中打印 Var

javascript - Angular 动态表单添加嵌套表单数组

javascript - ScrollTo 函数滚动经过元素

javascript - asp.net mvc 4在bootstrap模式插件中注册

javascript - Sequelize Single Instance - 在 Module.exports 之后不工作

javascript - EnumDropDownListFor 更改 ajax 调用操作并将所选值分配给数据库的一个字段

html - 我怎样才能保持 slider 大小相同的图像?

javascript - 显示内部 html 需要覆盖/灯箱

javascript - 子 div 掩盖了对其父 div 的点击