HTML5 / JavaScript停靠/流部分布局

Question

我正在使用Asp.net mvc（w / html5）制作Web應用程序。 以下是我的應用程序原型布局計划：

如您所見，有4個不同的部分：

1. 可伸縮側菜單（靠左停靠）：這是一個側菜單，允許用戶單擊按鈕並將其滑出視圖。 使用滾動條可以在其區域內滾動。
2. 標題欄（對接頂部）：簡單的部分，帶有停靠在頂部的幾個按鈕。
3. 內容區域（拉伸以適應可用空間）：這將顯示用戶關注的內容。 當用戶滾動瀏覽器窗口時，這將是唯一滾動的區域
4. 按鈕欄（對接底部）：該應用程序的區域保持按鈕。

因此，我真正的問題是如何設置要停靠的區域，以便即使滾動窗口也可以始終顯示該區域（例如右邊的Facebook廣告欄或他們的聊天好友列表） 。 如果內容區域比瀏覽器窗口長，而不是用戶向下滾動瀏覽器窗口時（或者如果我們需要實現一個自定義可滾動窗口來處理應用程序中自己的滾動），則他們將向下滾動內容區域，但所有其他區域區域將停靠在視野中。 您如何實現的？ 如今，許多網站似乎都在這樣做（facebook，twitter，windows azure等）。 任何示例將不勝感激。

謝謝

Answer 1

網絡的好處是，您可以檢查（使用Firebug或其他工具）其他站點，以查看它們如何構建它們。

就是說，如果您想要一個粘性區域，我建議使用StickyFloat，這是一個效果很好的jQuery插件 。

Answer 2

CSS方法是將元素的position設置為fixed

此頁面有一個示例： http : //davidwalsh.name/dw-content/css-fixed-position.php查找或右上角的黃色粘滯便箋。 這是該元素的相關CSS

.element {
    position: fixed;
    top: 2%;
    right: 2%;
}

Answer 3

我使用了這個很棒的jQuery插件，它提供了您想要的東西以及更多。

UI布局插件