iPhone-like Sliding Headers
<p>I'm working on a project where per design we should have iPhone-like sliding headers in a table. There's a table which has rows with dates. The idea is to fix that date header and change it's text when the next such header is reached. To be more clear, I've found an example of such an implementation:</p>

<p><a href="http://jqueryfordesigners.com/iphone-like-sliding-headers/" rel="nofollow">http://jqueryfordesigners.com/iphone-like-sliding-headers/</a></p>

<p>The problem is that I can't use that technique as in that examples the list is wrapped in a container while in my case the container is the whole page (I'll need to handle the window scroll event instead of the container scroll) and I need to work with a table and table rows. Could anybody help me with an idea on how can this be done?</p>

<p>UPDATE: The code of the table is pretty straightforward:</p>

<pre><code>&lt;table&gt;
&lt;tr&gt;
&lt;td colspan="3" class="daterow"&gt;08.25.2012&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="3" class="daterow"&gt;08.24.2012&lt;/td&gt;
&lt;/tr&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;td&gt;Some other row&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Thanks.</p>
