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

Question

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

正如您所看到的，有4个不同的部分：

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

所以我真正的问题是如何设置要停靠的区域，以便即使在滚动窗口时也将其设置为始终显示在该区域中（例如，右边的facebook的广告栏或他们的聊天好友列表）。如果内容区域比浏览器窗口长，那么当用户向下滚动浏览器窗口时（或者如果我们需要实现在应用程序中处理其自己的滚动的自定义可滚动窗口），它们将向下滚动内容区域，但所有其他区域将停靠在视野中。你是如何实现这一目标的？很多网站似乎都在这么做（facebook，twitter，windows azure等）。任何例子都将不胜感激。

由于

Answer 1

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

也就是说，如果你想要一个粘性区域，我建议StickyFloat, a jQuery plugin效果很好。

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 Layout Plugin