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 con

Answer 1

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

Answer 2

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;


    }