不滚动超出页面顶部的表格标题？

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）并给它一个固定高度和宽度。

我会向您指出我的来源，但不幸的是我似乎找不到它，这说明它非常直截了当。

Answer 2

好吧，有this plugin，但它只使表格主体可滚动（页眉和页脚保持在原位，但表格主体有一个滚动条，如果超出给定高度则变为可滚动），它不会使页眉贴在页面顶部。

它的工作方式如下：它将列宽保存在一个变量中，然后从表格中提取页眉和页脚，将它们放在表格前后的容器中，然后将表格本身放在一个具有所需最大高度的容器。这样，如果表格大于容器的最大高度，它就会变成可滚动的。然后它恢复列宽。

我认为您可以调整此插件以适应您的情况，也可以按照此模式创建自己的插件。

Answer 3

SlickGrid 是一个非常好的网格（表格）。 http://mleibman.github.com/SlickGrid/examples/example12-fillbrowser.html

它符合您的期望吗？

Answer 4

如果浏览器支持 jQuery，这个脚本可以工作。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    function stickyObject(position,top,stickyoffset) { //object
    this.position = position;
    this.top = top ;
    }
    //#tableheader represents your element's id
    $(document).ready(function(){ // stores original position details of element in an object
    tableheader = new stickyObject($("#tableheader").css("position"),$("#tableheader").css("top"));
    });

    function stickyMy(elem) {
    elemObj = (elem.data).replace("#","");
    if($(window).scrollTop()>offset.top-parseFloat(window[elemObj].stickyoffset)) {// checks if the user has scrolled past the top of the element we want to make sticky . 
    $(elem.data).addClass((elem.data).replace("#","") + "-sticky"); // if yes, then adds a class to the element elementid-sticky.
    $(elem.data).css("position","fixed");
    $(elem.data).css("top","0");
    }
    else {
    $(elem.data).removeClass((elem.data).replace("#","") + "-sticky");
    $(elem.data).css("position","");
    $(elem.data).css("position",window[elemObj].position);
    $(elem.data).css("top","");
    $(elem.data).css("top",window[elemObj].top);
    }
}
$(window).scroll("#tableheader",stickyMy).resize("#tableheader",stickyMy); 

</script>

Answer 5

这很简单，无需添加自定义脚本或js

只需使用 CSS ;)

让我们看看 这是当前项目的一个例子，所以我有这个表头 2 个

<tr id="TableTitle">
        <th>302/365</th>
        <th id="secondH">Lundi 29 octobre </th>
    </tr>

&这是我使用的css：

    #TableTitle {
position: fixed;
z-index: 2000;
padding: 4px;
background: #EFF0EB;
width: 100%;
text-align: center;
}

所有由位置固定的方式完成，当您滚动时它是固定的 之后我只是添加一些样式效果:) 重要的是 z-index 必须是页面上最高的数字，这样没有元素会在它上面传递（如 jquery 选项卡或对话框......）

您应该知道有多少 表格标题并自定义宽度

#secondH {
width: 90%;
text-align: center;
}

& 我让你自定义你想要的样子 那很简单:) 你明白了吗？

CSS 力量

Answer 6

例如，使用两个表/div 来固定两者的顶部位置

第一个 div 高度为 50px，然后第一个 div 顶部 =0px，第二个 div 顶部 =50px 并为第二个 div 设置溢出滚动，以便第二个 div 出现滚动，第一个 div 保持不变。