3

本文が頭の下でスクロールする、固定ヘッダーを持つテーブルを作成しようとしています-これは問題ありません。素晴らしい例がたくさんあります。

複雑なのは、テーブルのヘッダーに到達するまで、テーブルの残りの部分と一緒にスクロールし、セクションの残りの部分がそれらの下にスクロールされるまで移動しない、スティッキーなサブヘッダーを作成できるようにしたいことです。次のスティッキー サブヘッダーに置き換えられます (iPhone のアドレス帳に少し似ています)。どのように表示する必要があるかの例: CSS と jQuery を使用した Instagram の iPhone アプリのように、スティッキー ヘッダーを「押し上げる」ようにする

上記の例はテーブルで行われていません。表示する必要がある表形式のデータがたくさんあるため、テーブルである必要があります。

これまでのところ、これが機能する例を見つけることができず、私が試したすべてが惨めに失敗しました。他のソリューションとの競合を回避できると考えたため、固定ヘッドなどを持たない 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>

どんな助けでも大歓迎です。これは本当に私を困惑させました。

4

1 に答える 1

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/

于 2015-10-06T05:17:57.960 に答える