具有固定头部的滚动表中的粘性子标题

Posted

技术标签:

【中文标题】具有固定头部的滚动表中的粘性子标题【英文标题】:Sticky subheaders in a scrolling table with a fixed head 【发布时间】:2015-10-06 04:48:42 【问题描述】:

我正在尝试创建一个带有固定标题的表格,其中正文在头部下方滚动 - 这很好,并且有很多很好的例子。

复杂之处在于,我希望能够让粘性子标题与表格的其余部分一起滚动,直到它们碰到表格标题,然后在该部分的其余部分滚动到它​​们下方之前不要移动,在这一点它们被下一个粘性子标题(有点像 iphone 地址簿)所取代。我需要它的外观示例:Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery

上面的例子不是用表格完成的,我有很多表格数据需要显示,所以它需要是一个表格。

到目前为止,我还没有找到一个这样的例子,而且我尝试过的一切都失败了。我已经包含了一个没有任何固定头等的 jsfiddle 示例的链接,因为我认为它可以避免与其他解决方案的冲突:https://jsfiddle.net/q7zLhus0/

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
</thead>
<tbody>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
    </tr>
    <tr>
        <td>1</td>
        <td>6</td>
        <td>3</td>
        <td>6</td>
        <td>2</td>

    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>7</td>
        <td>2</td>
        <td>5</td>

    </tr>
    <tr>
        <td>S</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>

    </tr>
    <tr>
        <td>8</td>
        <td>5</td>
        <td>3</td>
        <td>7</td>
        <td>9</td>

    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
    </tr>
    <tr>
        <td>A</td>
        <td>5</td>
        <td>3</td>
        <td>H</td>
        <td>D</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>T</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>W</td>
        <td>2</td>
        <td>6</td>
    </tr>
    <tr>
        <td>5</td>
        <td>3</td>
        <td>W</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>9</td>
        <td>E</td>
        <td>3</td>
        <td>S</td>
    </tr>
    <tr>
        <td>T</td>
        <td>4</td>
        <td>D</td>
        <td>H</td>
        <td>S</td>
    </tr>
    <tr>
        <td>4</td>
        <td>S</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>R</td>
        <td>7</td>
        <td>S</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
</tbody>

任何帮助将不胜感激。这个真的把我难住了。

【问题讨论】:

【参考方案1】:

添加此功能

function stickyTitles(stickies) 

        var thisObj = this;

        thisObj.load = function () 

            stickies.each(function () 

                var thisSticky = jQuery(this).append('<span class="test" />');
                thisSticky.parent().height(thisSticky.outerHeight());

                jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

            );

            jQuery(window).off("scroll.stickies").on("scroll.stickies", function () 

                thisObj.scroll();

            );
        

        thisObj.scroll = function () 

            stickies.each(function (i) 

                var thisSticky = jQuery(this),
                    nextSticky = stickies.eq(i + 1),
                    prevSticky = stickies.eq(i - 1),
                    pos = jQuery.data(thisSticky[0], 'pos');

                if (pos <= jQuery(window).scrollTop()) 

                    thisSticky.addClass("fixed");

                    if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) 

                        thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                    

                 else 

                    thisSticky.removeClass("fixed");

                    if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) 

                        prevSticky.removeClass("absolute").removeAttr("style");
                    
                
            );
        
    

    jQuery(document).ready(function () 

        new stickyTitles(jQuery(".subheader")).load();

    );

演示链接-https://jsfiddle.net/kjo9w57a/1/

【讨论】:

从功能上讲,这很好用——唯一的问题是子标题会改变大小,因为它上面有 21% 的宽度值?如果我删除宽度值,它不会改变......? 应用宽度这个类".subheader.fixed" 48%;正在工作 我对整个表格进行了更改,然后添加了宽度:jsfiddle.net/fns3fm6x

以上是关于具有固定头部的滚动表中的粘性子标题的主要内容,如果未能解决你的问题,请参考以下文章

粘性侧边栏:向下滚动时固定在底部,向上滚动时固定在顶部

如何创建滚动后固定在顶部的粘性导航栏

粘性标题后面的内容在可滚动表中可见

UICollectionView 的标题视图在滚动时不断重复 - 如何创建固定(非粘性)的单个集合视图标题?

使用应该具有固定位置的按钮滚动

使用元素ui删除具有固定列的表中的垂直线[关闭]