Scroll content within its own div using window's main scrollbar

Question

Possible Duplicate:
Scroll particular DIV contents with browser’s main scrollbar

I'm trying to replicate the 'scroll a specific div using the explorer's main scrollbar and hide the content underneath the fixed(position:fixed) header'.

Have a look for an example at this website. In the website as you can see, the content in the middle can be scrolled by the window's main scrollbar and the content kind of hides 'underneath' the fixed header.

the following is the CSS that I have for the body (the content in the middle):

#body {
    position: relative;
    padding: 0;
    margin-left: 320px;
    margin-top: 130px;
    width: 500px;   
}

and this is the CSS for the fixed header:

#header {
    position: fixed;
    top: 0;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);   
    width: 100%;
    height: 130px;
    z-index:2;
}

the content in the middle currently scrolls underneath the fixed header but it show there since my header is just an PNG image. So the text can be seen as it flows underneath the header image when I'm crolling!

as you can see by zooming in and out, the header in the example website has a non-transparent background-image with the texture of the road, so you can only archieve this ieffect in the same way — john Smith, Jan 19 '13 at 13:53

Roko C. Buljan · Accepted Answer · 2013-01-19T14:01:47.083

2

You should use the same background image (same texture) on the header background like the actual body background has, and you'll get your desired effect.

http://jsbin.com/uqimac/1/edit

edited Jan 19 '13 at 14:01

answered Jan 19 '13 at 13:52

Roko C. Buljan

196,159
39
305
313

score 0 · Answer 2 · answered Jan 19 '13 at 13:51

0

Your content div should have:

#content {
  height:500px; /* some fixed height */
  overflow:hidden; /* hide the scrollbars */
}

answered Jan 19 '13 at 13:51

eozzy

66,048
104
272
428

Scroll content within its own div using window's main scrollbar

2 Answers2