jQuery (maybe) horizontally fix element, but vertically scroll it

Question

I know I've seen this done somewhere, but I can't find it anywhere.

Basically, I have a side scroller (here: http://www.allisonnavon.com) that I'm putting together.

The main problem is if the browser window is just a bit too short on height, the site will scroll vertically and cover up the title that is supposed to be fixed.

I guess the other possibility is to auto-resize the images if the window's height doesn't match the site, but I want to avoid that if I can. Thanks.

Answer 1

Here is a quick and dirty solution add the following class to your css

.shader {position:fixed; width: 100%; height: 160px;background: #F9F6E5; top: 0px;left: 0px;}

and a div width this class just after the opening container div

<div class="container">
<!--add this -->
<div class="shader"></div>
<!--end add -->
<!-- text and image -->