Question

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:

1. 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.
2. Header Bar (docked top): Simple section with few buttons that is docked to the top.
3. 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
4. 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

Answer 1

The CSS way is to make an element’s position set to fixed

This page has an example: http://davidwalsh.name/dw-content/css-fixed-position.php Look or the yellow sticky note on the top right. This is the relevant CSS for that element

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