title: Making a fixed div scroll horizontally, & return to centre when page is maximised
body: <p>I have been hunting around for a solution to my problem and have solved the first half, but have one small outstanding snag that I am hoping someone can help me with.  I am reasonably well versed in html and css, and have been known to make use of the odd bit of very basic php, but am totally new to javascript / jquery, and am very much an amateur  when it comes to web design, so please be gentle with me and explain in simple terms!</p>
  
  <p>I am trying to put together a website with a fixed width of 960px which, in wider browser windows, is centred.  For this I am using the following CSS:</p>
  
  <pre><code>#container {
   width:960px;
   margin:auto;
  }
  </code></pre>
  
  <p>which is working fine.</p>
  
  <p>At the top of this div, I want to have a fixed horizontal menu which floats above the rest of the page's content, which is the full 960px wide, and which stays glued to the top of the viewport and in view when the user scrolls vertically downwards.  </p>
  
  <p>While the window is wider than the 960px wide container, this is easy, and the following CSS works just fine:</p>
  
  <pre><code>#top {
   width:960px;
   position:fixed;
   top:0;
  }
  </code></pre>
  
  <p>The problem is that, because the CSS position:fixed is always in relation to the viewport, if the window is shrunk to less than 960px wide, the page gains a scroll bar at the bottom and main content area scrolls to the right, but the fixed menu at the top does not, meaning that the right hand side of it is lost and cannot be accessed.</p>
  
  <p>When searching for a solution to this I found <a href="https://stackoverflow.com/questions/10054588/a-fixed-div-with-javascript-to-scroll-when-a-window-is-too-small-doc-type-issue">this thread</a>, in which it says that the following jquery code will do the trick:</p>
  
  <pre><code>$(window).scroll(function () {
   $('#top').css('left', -($(window).scrollLeft()));
  });
  </code></pre>
  
  <p>Essentially, this alters the css on the #top div to move it left as the user scrolls right.  This seems elegant, simple and perfect for my needs.  After some faffing around trying to figure out how to make this work and where to put it, I have added the following code inside my body tags:</p>
  
  <pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; $(window).scroll(function () {
     $('#top').css('left', -($(window).scrollLeft()));
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>So far, so good!  When the page is first loaded, at a browser window wider than 960px, the menu is at the top and centred inside the container div, and stays fixed in place when the main content is scrolled up and down.  Then, when the window is shrunk to less than 960px and a horizontal scroll bar appears, the menu scrolls to the right alonside the main content.  Perfect!  Sadly, there is one more snag....</p>
  
  <p>Although the scrolling then works fine while the page is narrow, if it is once again widened to more than 960px, the floating menu at the top stays over to the left hand side, rather than moving back to the centre along with the main content, because it still has the css "left" property as set by the jquery code again.  This breaks my lovely layout, and means that the menu is no longer in line with the main content.  </p>
  
  <p>Somehow, I need to essentially delete this bit of css as soon as the browser window goes above 960px wide and the horizontal scroll bar disappears.  </p>
  
  <p>Is there some sort of javascript / jquery that will do this?  I am completely new to all this, and so far searching has got me no-where.....</p>
  
  <p>Any help or suggestions greatly appreciated!</p>