How to make fixed header scroll X with content

Question

If you take a look at: http://www.bendemeerwoolshed.co.nz

I have a fixed header. All fine there, however, if you reduce the width of the window (or look at it zoomed in on a mobile device) and need to scroll on the X axis, only the content scrolls. Is there a way to set position: fixed for just the Y axis?

Here is the CSS for the header:

header#header { 
   position: fixed; 
   height: 188px; 
   background: #fff url(../images/headerbgstrip.png) bottom center no-repeat; 
   width: 100%;
}

http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y — Aaron Miler, Jun 22 '12 at 02:58
try setting your width in pixels instead of 100& make it 1200px for example. — Kees Sonnema, Jun 22 '12 at 08:51

score 0 · Accepted Answer · answered Jun 22 '12 at 04:01

Taken care of with a simple piece of jQuery:

$('#header').css("left","-"+$(window).scrollLeft()+"px");

As a side note, I attached the header to the content in mobile devices as the static header was occupying too much real estate in mobile browsers anyway.

How to make fixed header scroll X with content

1 Answers1