How to create a Google Plus like scrolling UI?

Question

Please note that Hijack page scrolling like Google Plus? asks for a very different stuff.

In the following screenshot from Google+ the red box shows the area which scrolls. All other portions, for example, the left navigation is static. I am very intrigued by their UI. You can scroll the center part even when your mouse is over the navigation section or any other fixed part.

Any idea how do they do it?

Only the portion inside red box scrolls

This is programmer's QnA, not Biology QnA. There was no pun. Please comment what is relevant. — AppleGrew, May 11 '12 at 15:41

score 0 · Accepted Answer · answered May 11 '12 at 16:14

0

The UI components are probably all in display: fixed CSS blocks, which pin them to the browser window, regardless of scrolling. Then the main content can be in a regular block, which scrolls with the page.

answered May 11 '12 at 16:14

Xophmeister

8,884
4
44
87

But I don't really see them using `fixed` anywhere. – AppleGrew May 11 '12 at 17:10

How to create a Google Plus like scrolling UI?

1 Answers1