Html5/Javascript停靠/流程部分布局

Question

Im在使用Asp.net mvc（w/html5）制作Web应用程序的过程中。以下是我的应用程序原型布局规划：

正如你可以看到有4个不同的部分：

1. 伸缩侧菜单（左对接）：这将是一个侧菜单将允许用户点击一个按钮并将其滑出视图。它将在其区域内用卷轴滚动。
2. 标题栏（对接顶部）：带有停靠在顶部的几个按钮的简单部分。
3. 内容区域（拉伸以适合可用空间）：这将显示对用户焦点的内容。这将是用户滚动浏览器窗口时滚动的唯一区域。
4. 按钮栏（停靠底部）：保存应用程序按钮的部分。

所以，我真正的问题是如何设置一个区域停靠，以便它始终显示在该区域，即使窗口滚动（例如将在右侧的Facebook的广告栏或他们的聊天朋友列表）。如果内容区域长于浏览器窗口的长度比用户向下滚动浏览器窗口更长（或者如果我们需要实现一个自定义可滚动窗口来处理应用程序中自己的滚动），它们将向下滚动内容区域，但所有其他区域地区将保持停靠在视野之内。你如何做到这一点？现在很多网站似乎都在做这些事情（Facebook，Twitter，Windows Azure等）。任何例子，将不胜感激。

感谢

Answer 1

CSS的方法是使元素的position设置为fixed

这个页面有一个例子：http://davidwalsh.name/dw-content/css-fixed-position.php外观或右上角的黄色便条。这是该元素的CSS相关

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

Answer 2

关于网络的好处是，你可以检查（使用Firebug或其他工具）等网站，看看他们如何建立他们。

这就是说，如果你想要一个粘性区域，我推荐StickyFloat, a jQuery plugin这很好。

Answer 3

我用的是提供你想要什么，并更多的这个美好的jQuery插件..

UI Layout Plugin