title: scroll left side of div only using page scroll bar
body: <p>Today I had a look on the <a href="http://foursquare.com" rel="nofollow">foursquare.com</a> website, when I search something in my city, it return me to the result page, and in the result page, when I scroll the page down using the page scroll bar, only the left column containing the listview of places detail scrolled down, not the right hand side of the page, I just want to know how that can be done using jquery or javascript. 
  suppose I have the following html div:</p>
  
  <pre><code>     &lt;html&gt;&lt;body&gt;
         &lt;div id="wrapper" style="width:900px;height:1200px;margin: 0 auto;"&gt;
  
          &lt;div id="left_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;"&gt;
           &lt;ul&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;li&gt;list 1&lt;/li&gt;&lt;/ul&gt;
              &lt;/div&gt;
  
        &lt;div id="middle_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;"&gt;&lt;/div&gt;
  
          &lt;div id="right_colunm" style="width:300px;height:1200px; float:left;border:1px solid #000000;"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>when I using the page scroll bar, only the content in the left_column is scrolled, not the middle one and the right one, can any one show me how to do it in jquery. any help will be grately appreciated!</p>