Hide Scrolling Content Under Transparent Header

Question

Alright, I've gone nuts looking for an answer. This is simple, I know it.

I have a fixed transparent header at the top of my page. When I scroll I want the body content to scroll under it but not be seen through the header div. I've seen similar posts but nothing that helps me with my case. Appreciate any hints or cues that could help out. Thanks!

Example below: thnki.com/hosting/sycamore

Answer 1

I have read many related examples for hinding main body text under the top bar. However, I could not work it in my case. I found an online simple working example. You may want to have a look on that:

http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

My related CSS configuration was that: * You may note that I have declared top/bottom/left/right/height as well position to relative, I set background, overflow to auto and I set z-index too.

I am thinking that all these combinations resulted to be able to hide the text content when was scrolled under the top bar / under the top menu.

.topnavigation {  
    background-position:fixed;
    background-color:   lightgray;
    width:              100%;
    overflow:           auto;
    z-index:            10;

}
    .main_body {
        background:     white;
        position:       relative;
        left:           200px;
        top:            30px;
        bottom:         0;
        right:          0;
        white-space:    wrap; 
        width:          660px; 
        overflow:       auto;
        border:         0px;
        z-index:        1;


    }

Answer 2

You will either need to:

• make a non transparent image that looks the same as it is now,
• create a div for the lower part of the page (directly under/after the header) that has its own overflow style setting, which will cause the scrollbar to be only part of the page
• or just enjoy that super awesome transparency-overlay effect you're getting.

i like it how it is actually