Html5 / Javascript停靠/流程部分布局(Html5/Javascript Docking/Flow Section Layout)

Html5 / Javascript停靠/流程部分布局(Html5/Javascript Docking/Flow Section Layout)

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

如您所见，有4个不同的部分：

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

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

谢谢

Im in the process of making a web application with Asp.net mvc (w/html5). Following is my prototype layout plan for the application:

As you can see there are 4 different section:

Retractable side menu (docked left): This will be a side menu that will allow the user to click a button and slide it out of view. It will be scrollable with a scroller within its area. Header Bar (docked top): Simple section with few buttons that is docked to the top. Content Area (stretched to fit available space): This will show the content that is in focus to the user. This will be the only area that scrolls when the user scrolls the browser window Button Bar (docked bottom): Section holding buttons for the application.

So my real issue is how you go about setting an area to be docked so that it is set to show in that area at all times even when the windows is scrolled (example would be facebook's ad bar on the right or their chat friend list). If the content area is longer than the browser window than when the user scrolls down the browser window (or if we need to implement a custom scrollable window that handles its own scrolling within the application) they will scroll down the content area, but all other areas will stay docked in view. How do you achieve this? A lot of websites seem to be doing it these days (facebook, twitter, windows azure etc). Any examples would be appreciated.

Thanks