CODEWITHSUNDEEP
jqueryhtmlcss
Magnusland
Magnusland

Reputation: 81

Hide content on scroll

Take a look at this site. I am trying to make the main content scroll beneath the orange horizontal line, without appearing above it, and at the same time keeping the native browser scroller. With the latter iframe or layer overflow: auto; is out of the question. Also chopping images to put them on top would not work because of the scalable background.

Any ideas? Javascript needed?

Upvotes: 2

Views: 634

Answers (3)

Cristian Necula
Cristian Necula

Reputation: 1245

Add another

<div id="header-bilde">
 <img src="/images/sized/bilder/bilde1-1200x962.jpg" width="1268" height="1016" alt="">
</div>

with style:

#header-bilde {
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    height: 150px;
    overflow: hidden;
    z-index: 9;
}

between #venstre and #hoyre.

Give #delicatessen, #majorstuen and #venstre z-index:10;

Give #hoyre z-index: 8;

Then apply the same js manipulation that you do for #bakgrunnsbilde to the #header-bilde div.

Upvotes: 2

Clyde Lobo
Clyde Lobo

Reputation: 9174

Well changing the z-index of #strek to 1000 and of #hoyre to 100 makes the div scroll under the orange line

Upvotes: 0

Elad Lachmi
Elad Lachmi

Reputation: 10561

How about using z-order and putting the header above the rest of the page with position: fixed and top:0;

Upvotes: 0

Related Questions