如何在3列布局中保持列内容可见（粘性）？

Question

我有三列布局。主栏的内容比其他两个都多。

• 当用户向下滚动时，由于空列，他会看到很多空格。
• 在用户滚动时在Facebook上，一旦右栏没有更多内容，它就会粘在页面底部
• 所以此专栏中始终有内容。

我不知道如何实现这一点，所以任何想法，jquery插件或如何将被欣赏。

我在当前项目中使用以下技术： * jquery * twitter bootstrap 3

重要的是要注意列内容可能高于页面本身，因此bootstrap词缀不起作用。

Answer 1

看看这个Sticky-Kit Plugin。它在不同的用例中工作得非常好。

Answer 2

我们使用margin-top来移动列。看看https://github.com/collective/collective.rcse/blob/93f47d15694c7f71635d1117342d2b84ea85bab7/collective/rcse/resources/dev/js/theme-desktop.js#L797以查看功能。

Answer 3

这个东西可以使用jQuery和CSS完成。 检查一下 - http://jsfiddle.net/MAPNk/

这是一件小作品。

这是我遵循的几个步骤：

1. 在滚动条件上调用了一个函数
2. 检查侧边栏和窗户的高度。 //窗口是监视器大小。
3. if（侧边栏高度＆lt;窗口高度），将position of sidebar更改为fixed
   和top到0 (or where the div start)。
4. else if（窗口底部＆gt;侧边栏底部），将position of sidebar更改为fixed，将bottom更改为0。

向下滚动时会执行上述条件。同样，在向上滚动时移除位置或使其绝对。

尝试其余的，你一定会发现。 :)