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

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;
}

所有这一切都是通过postion修复的，当你滚动之后它就被修复了我只是添加了一些样式效果:)重要的是z-index必须是你页面上最高的数字，就像没有元素会在它上面传递一样（比如jquery标签或对话框...）

你应该知道你有多少表头和自定义宽度

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

＆我让你自定义你想要的样子非常简单:)你看到了吗？

CSS电源

Answer 6

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

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