在页面滚动上显示/隐藏div [英] Show/hide div on page scroll

问题描述

我有一个包含很多行的表，这使页面滚动.表格上方还有其他内容.我想添加一个使用jQuery的功能，以便在表格滚动到该位置时，在页面顶部显示div，在该位置，顶部行消失在屏幕顶部边框上方.

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.

我假设我将添加一个位置固定为div的div，但是我怎么知道第一行何时移到折叠上方?

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?

<div id="topDiv" style="display: none; position: fixed; top: 0"></div>

<table>
<thead>
<tr>
   <th></th>
<tr>
</thead>
<tbody>
<tr>
   <td></td>
<tr>
...
</tbody>
</table>

推荐答案

这就是您要寻找的.粘性Div:

This is what you are looking for. Sticky Div:

http://blog.yjl. im/2010/01/stick-div-at-top-after-scrolling.html

实施示例: http://www.nkhome.com/kestrel/compare-kestrels.php

这篇关于在页面滚动上显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！