Show/hide div on page scroll
<p>I have a table with a lot of rows, which makes the page scroll. There's some other content above the table. I would like to add a functionality using jQuery, to show div across the page top, as soon as the table scrolls to the point, where the top row disappears above the top border of the screen.</p>

<p>I assume I'll add a div with position set to fixed, but how do I know when the top row moves above the fold?</p>

<pre><code>&lt;div id="topDiv" style="display: none; position: fixed; top: 0"&gt;&lt;/div&gt;

&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
   &lt;th&gt;&lt;/th&gt;
&lt;tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
   &lt;td&gt;&lt;/td&gt;
&lt;tr&gt;
...
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
