title: Is it possible to fix a div on an X-axis, but scroll on the Y-axis?
body: <p>HTML</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;ul id="nav"&gt;
         &lt;li&gt;&lt;a id="ho" href="#spread1-anchor"&gt;Home&lt;/a&gt; /&lt;/li&gt;
         &lt;li&gt;&lt;a id="bg" href="#spread2-anchor"&gt;Background&lt;/a&gt; /&lt;/li&gt;
         &lt;li&gt;&lt;a id="ap" href="#spread3-anchor"&gt;Approach&lt;/a&gt; /&lt;/li&gt;
         &lt;li&gt;&lt;a id="se" href="#spread9-anchor"&gt;Services&lt;/a&gt; /&lt;/li&gt;
         &lt;li&gt;&lt;a id="cl" href="#spread10-anchor"&gt;Clients&lt;/a&gt; /&lt;/li&gt;
         &lt;li&gt;&lt;a id="co" href="#spread11-anchor"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  &lt;!-- Very wide horizontal scrolling content--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  }
  #container {
  width: 8000px;
  height: 590px;
  /*etc*/
  }
  </code></pre>
  
  <p>Using the above code, I have a very wide <code>#container</code> that scrolls horizontally, using ScrollTo.js. And the <code>#header</code> that controls it is in a fixed position, as I don't want it to scroll with the rest of the page/container. My problem is, that if you resize the windonw vertically, the container hides underneath the <code>#header</code> due to it fixed position.</p>
  
  <p>Can the <code>#header</code> be fixed horizontally, but still scroll vertically? Using jQuery or CSS?</p>
  
  <p>My live example is here: <a href="http://www.kargo2.com/Stackover/" rel="nofollow">http://www.kargo2.com/Stackover/</a></p>
  
  <p>Thanks.</p>