Question

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

我找到了一些可以执行此操作的脚本，但到目前为止我还没有找到适用于IE7的脚本。

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

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选项卡或对话框......）

你应该知道多少 表格标题你有＆amp;自定义宽度

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

＆安培;我让你按照自己想要的方式定制这很简单:)你明白了吗？

CSS power

Answer 6

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

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

不会滚动到页面顶部的表格标题？

6 个答案: