0

I am kind of a beginner in css and I have tried to see if I can find a solutions for my problem with getting my content not to show under my transparent header when there is a need to scroll. I have checked the following post but I can't make this work. I would be extreamly happy if I could get some guiding into this if possible. I attached a visual of my problem if it is of any help. www is www.portaponte.com Thanks in advance!

Hide scrollable content behind transparent fixed position divs when scrolling the page?

Community
  • 1
  • 1
user1266860
  • 1
  • 1
  • I guess [here's](http://portaponte.com/?page_id=300) the problem, right? I don't really get what you want to achieve. If the text disappeared just before the header instead of going under it would be fine? – scumah Mar 13 '12 at 17:15
  • Yes that would be very fine if the text disappeared just before the header. Thanks for trying to help out. – user1266860 Mar 13 '12 at 17:25

1 Answers1

0

Well, Although not perfect, I'll go with an answer:

The problem with this solution is that scrolling will work only when hovering the scrollable content, meaning that you wont be able to scroll if your mouse is outside the big text container. That being said, thats what I thought you could do:

First of all, wrap the #casing div in a #casing-wrapper div, getting something like this:

<div id="casing-wrapper">
  <div id="casing">
    lots of content here...
  </div>
</div>

Then you'll need to style this new div this way:

#casing-wrapper {
  width: 800px;
  position: fixed;
  left: 50%;
  margin-left: -400px;
  top: 90px;
  overflow-y: scroll;
}

Also you'll need to add some jQuery to set #casing-wrapper's height depending on window's height:

jQuery(document).ready(function(){
  setWrapperHeight();
  jQuery(window).resize(function(){
    setWrapperHeight();
  });
});

function setWrapperHeight() {
  var height = jQuery(window).height();
  var margin = 90;
  jQuery("#casing-wrapper").css({"height":height - margin});
}

And that's all. Doing this, we created a new layer containing the scrollable content that has the window's height minus 90px. Those 90px come from your header's height plus it's top margin. Since the wrapper has position: fixed, it won't move on scroll, but it's content will. On top of that, with the overflow-y: hidden; property we clip any overflowing content, resulting in the text not being visible under your header.

Anyway, in my opinion the result of letting the letters go under the header is cool, and I won't change it :P

scumah
  • 6,273
  • 2
  • 29
  • 44
  • Thanks a lot, I will try this out and see how it goes! In my opinion the text is ok when going under the header and I might talk some sense into the ones that feels it is a must to hide it :) Thanks again! – user1266860 Mar 13 '12 at 18:43