1

My content scrolls beneath the left sidebar instead of disappearing when it reaches the sidebar. Both the left sidebar and the bottom footer are fixed.

http://karpouzaki.com/finaltouch/

Any suggestions?

4
  • What have you tried? It's hard to tell what you want from your current description.
    – Matt H
    Jan 4, 2012 at 16:19
  • Hi, when you scroll I want the content to dissapear before the menu sidebar. I tried custom scrollers but with no luck. Because my footer and sidebar is fixed I am not able to set a the scrolling of the content to the specified area.
    – Chris
    Jan 5, 2012 at 15:09
  • So let me see if I understand: Right now, you have 3 content areas: left sidebar, center, right sidebar. The center and right comprise a "page", while the left is a fixed, permanent menu. When you scroll, the "page" portion (center and right) fade into the menu (left), but you want it to disappear BEFORE it reaches the menu, rather than appearing mixed with the menu. Is that correct?
    – Matt H
    Jan 5, 2012 at 15:55
  • Hi there, yes thats correct I dont want the content to be mixed with the permanent menu on left I want it to dissapear just before it reaches the menu. The site it karpouzaki.com/finaltouch
    – Chris
    Jan 7, 2012 at 10:03

1 Answer 1

0

You need to change your background from transparent to opaque. Add these styles:

#sidebar {
  background: url(../img/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  height: 100%;
  z-index: 1;
}
#footer {
  z-index: 2;
}

That should do it - it gives your sidebar the same image background, but it looks like it flows fine into the rest of the page. It extends the height of your sidebar so that the rest of the content scrolls "beneath" it. And the z-index changes cause the sidebar to be above the content but below the footer.

3
  • Thanks. I really appreciate your help. I got it fixed and working. I have another small question.
    – Chris
    Jan 10, 2012 at 10:57
  • On the same site karpouzaki.com/f09/ I have the content headers on the top right corner. About Us 01 ... Portfolio 04 Clients 05. What I am looking for is for the headings say Portfolio 04 to remail fixed at the same position while scrolling through the gallery and when the next Div of contents which is Client apeears for the heading Portfolio to change to Clients 05. Any suggestions?
    – Chris
    Jan 10, 2012 at 11:00
  • If this answer was correct, please mark it answered. This sounds like a different question, so you should post it as a new question.
    – Matt H
    Jan 10, 2012 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.