title: Div - Focus on scrolling screen
body: <p>I have the following code :</p>
  
  <pre><code>&lt;div id="leftpane"&gt;
      &lt;div id="one"&gt;One&lt;/div&gt;
      &lt;div id="two"&gt;Two&lt;/div&gt;
      &lt;div id="three"&gt;Three&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="float:right" id="display_div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have a page with a two-column layout, a left pane and a right pane (= main content area). The left pane has divs (one,two,three etc..) which are like menu items. The corresponding content for the selected div is displayed in the right pane.</p>
  
  <p>What I want to do (onload): the first div must be highlighted in the left pane and the corresponding content displayed in the right pane. As I keep scrolling down the left pane of div's , the focus should keep shifting to the lower divs gradually and their contents begin to be displayed respectively on the right pane.</p>
  
  <p>How can I possibly achieve this ?</p>
  
  <p>Thanks.</p>