3

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

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

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

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

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

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

4

6 回答 6

0

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

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

于 2012-10-29T08:40:14.820 回答
0

如果浏览器支持 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>
于 2012-10-27T13:04:34.763 回答
0

这很简单，无需添加自定义脚本或 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电源

于 2012-10-29T01:39:19.663 回答
0

Well, there is this plugin but it only makes a table body scrollable (the header and footer stay in place, but the table body gets a scrollbar and becomes scrollable if it goes beyond a given height), it doesn't make the header stick to the top of the page.

The way it works is the following : It saves the columns widths in a variable, then it extracts the header and footer from the table, puts them in a container before and after the table, then it puts the table itself in a container with the wanted max-height. This way if the table is bigger than the container's max-height, it becomes scrollable. Then it restores the column widths.

I think you can either adapt this plugin to fit your situation or create your own following this pattern.

于 2012-10-22T15:14:07.503 回答
0

这可能会帮助您：

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

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

于 2012-10-15T17:13:44.910 回答
0

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

它符合你的期望吗？

于 2012-10-26T10:45:53.173 回答