title: Position Fixed - Horizontal Scroll
body: <p>I have a left vertical side bar that when the user scrolls vertically, the side bar scrolls vertically with the user. However when the user scrolls horizontally if the window is too small, the vertical side bar slides along with the window. How do i stop the side bar from scrolling horizontally but also allowing the side bar to scroll with the user vertically.</p>
  
  <p>And I do not want to do this.</p>
  
  <pre><code>overflow: hidden;
  </code></pre>
  
  <p>as i want the user to have the ability to scroll horizontally but i just dont want the side bar to come along with them.</p>
  
  <p>this is my javascript:</p>
  
  <pre><code>$(document).ready(function(){
      var top = $("#sidebar").offset().top;
      $(window).scroll(function(){
          var y = $(window).scrollTop();
          if (y &gt;= top) {
              $("#sidebar").addClass('fixed');
          } else {
              $("#sidebar").removeClass('fixed');
          }
      });
  });
  </code></pre>
  
  <p>and my css is:</p>
  
  <pre><code>#sidebar {
      position: absolute;
      height: 100%;
      min-width: 100px;
      width: 100px;
      overflow: hidden;
      background-color: #ededed;
      border-right: 1px solid #aaa
      }
  #sidebar.fixed {
      position: fixed;
      height:100%;
      top: 0%;
      z-index: 1;
  }
  </code></pre>