如何保持列內容在3列布局中可見（粘滯）？

Question

我有三列布局。主欄內容多於其他兩欄。

• 當用戶向下滾動時，由於空的列，他看到大量空白空間。
• 在facebook上當用戶滾動時，一旦右欄沒有更多內容，它將粘貼到頁面底部
• 因此，此列中總是有內容。

我不知道如何實現這一點，所以任何想法，jQuery的插件或如何將不勝感激。

我用我的當前項目的下列技術： * jQuery的 * Twitter的引導3

這是必須注意的欄目內容可以比頁面本身較高，所以引導詞綴將無法正常工作。

Answer 1

我們使用margin-top來移動列。看看https://github.com/collective/collective.rcse/blob/93f47d15694c7f71635d1117342d2b84ea85bab7/collective/rcse/resources/dev/js/theme-desktop.js#L797看功能。

Answer 2

這個東西可以使用jQuery和CSS完成。 檢查出來 - http://jsfiddle.net/MAPNk/

這是一個小的工作。

這些幾步我也跟着：

1. 叫上滾動的功能
2. 檢查側欄和窗口的高度。 //窗口是顯示器大小。
3. 如果（邊欄的高度<窗口的高度），改變position of sidebar到fixed
   和top到0 (or where the div start)。
4. 否則如果（窗口底部>邊欄底部），將position of sidebar更改爲fixed和bottom至0。

上述條件在滾動時執行。同樣地刪除位置或使其在滾動上絕對。

嘗試其餘的，你一定會發現。 :)

Answer 3

看看這個Sticky-Kit Plugin。它在不同的使用情況下絕對正常。