3

ページに (ヘッダー セクションの後に) 長いテーブルがあります。ユーザーが下にスクロールしたときに、テーブル ヘッダーをページの一番上に保持したい (つまり、一番上までスクロールしてそこにとどまる)。

これを行うスクリプトをいくつか見つけましたが、これまでのところ IE7 で動作するスクリプトは見つかりませんでした。

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

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

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

誰でもこれに対する解決策を見つけましたか？テーブル自体に固定の高さを与えてから、テーブルのスクロール バーを設定したくありません。ページ全体のスクロール バーを引き続き使用する必要があります。

4

6 に答える 6

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 に答える
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

たとえば、2 つのテーブル/div を使用して、両方の上部の位置を修正します

1 番目の div の高さは 50px、次に 1 番目の div の上部 = 0px、2 番目の div の上部 = 50px とし、2 番目の div のオーバーフロー スクロールを設定して、2 番目の div の最初の div にスクロールが表示されるようにします。

于 2012-10-29T08:40:14.820 に答える
0

さて、このプラグインはありますが、テーブル本体をスクロール可能にするだけです（ヘッダーとフッターはそのままですが、テーブル本体にスクロールバーがあり、特定の高さを超えるとスクロール可能になります）、ヘッダーは固定されませんページの先頭へ。

動作方法は次のとおりです。列の幅を変数に保存し、テーブルからヘッダーとフッターを抽出し、それらをテーブルの前後のコンテナーに配置します。次に、テーブル自体をコンテナーに配置します。最大高さが欲しかった。このようにして、テーブルがコンテナの最大高さよりも大きい場合、スクロール可能になります。次に、列幅を復元します。

このプラグインを状況に合わせて調整するか、このパターンに従って独自のプラグインを作成できると思います。

于 2012-10-22T15:14:07.503 に答える
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 に答える