javascript - 表格标题不会滚动到页面顶部之外？

Question

我在页面上有一个长表格(在标题部分之后)。当用户向下滚动时，我想将表格标题保留在页面顶部(即向上滚动到顶部并停留在那里)。

我发现了一些可以执行此操作的脚本，但到目前为止我还没有找到可以在 IE7 中运行的脚本。

https://github.com/jmosbech/StickyTableHeaders/

http://jsfiddle.net/trepmal/e7GN8/

http://css-tricks.com/examples/PersistantHeaders/

有人找到解决办法了吗？我不想给表格本身一个固定的高度，然后给表格一个滚动条 - 整个页面滚动条仍然应该使用。

Answer 1

这可能对您有帮助:

    var windw = this;

$.fn.followTo = function (pos) {
    var $this = this,
    $window = $(windw);

    $window.scroll(function (e) {

        if ($window.scrollTop() > 1665) {
            $this.css({
                position: 'relative',
                top: 1187
            });
        } else {
            if ($window.scrollTop() < pos) {
                $this.css({
                    position: 'relative'
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        }
    });
};

$('#page-header').followTo(460);

行:

if ($window.scrollTop() > 1665) 

当您继续向下滚动页面时，如果需要，可以删除该元素，如果不需要，则可以将其删除。 该函数的其余部分是检查滚动条在页面上的位置(以允许初始页眉)，以便它知道何时“拾取”表格头。获取此内容的点在这里:

$('#page-header').followTo(460);

此外，当用户向上滚动时，此函数还会将标题“放下”回原位。

编辑:为了确保您的内容在拾取标题时不会“跳跃”起来，请确保将 #page-header 元素包装在容器中(例如 #page-header-container)并给它一个固定高度和宽度。

我会向您指出我的来源，但不幸的是我似乎找不到它，这说它非常简单。