-1

ページの上部に数行を貼り付けることができるjqueryプラグインを誰かが推奨できますか？

つまり、ページが読み込まれると、コンテンツは適切な場所に配置されます。コンテンツがページの上部に到達すると、ユーザーがスクロールしている間、コンテンツは所定の位置に固定されます...次に、上にスクロールすると、コンテンツは元の場所に戻りますか？

問題のコンテンツは、いくつかのTR要素になります。

いくつか試しましたが、試したものすべてに大きな問題があったので、もう少しお勧めできるかと思います。ありがとう

4

2 に答える 2

3

OK、これが私がこれにアプローチする方法です。

まず、次のような「ターゲット」div があります。

<div id="fixedHeader">
    <table>
        <thead></thead>
    </table>
</div>

次の CSS があります。

#fixedHeader
{
  位置: 固定;
  上: 0;
  float、left、right、margin など: 必要に応じて。
}

#fixedHeader:not(.active)
{
  表示: なし;
}

ページが最初に読み込まれるときに、テーブルtheadをこの div にコピーします。次に、ユーザーがスクロールしてテーブルの上部が見えなくなったら、これを表示します。上にスクロールしたら、もう一度非表示にします。activeクラスを追加/削除することで、非表示と表示を行います。

$(document).ready(function() {
    // copy over the thead
    $('#fixedHeader > table > thead').html($('#theTable > thead').html());

    // show or hide the div as necessary.
    $(window).scroll(function() {
        if ( $('#theTable > thead').offset.top < $(window).scrollTop() )
        {
            $('#fixedHeader').addClass('active');
        }
        else
        {
            $('#fixedHeader').removeClass('active');
        }
    });
});

ユーザーがテーブルの最後を超えてスクロールできる場合、問題が発生します。必要に応じて、そのケースの if 条件を展開できます。

于 2012-08-01T21:43:35.903 に答える
0

これを使用するだけです：

$("body").on("scroll",function(){
  $("tr.stickToTop").each(function(){
    if($(this).offset().y<=0){
      $(this).css({
        position: "fixed",
        top:0
      });
    } else {
      $(this).css({
        position: "static",
        top:''
      });
    }
  });
});

要素$("tr.stickToTop")で機能する jQuery セレクターに置き換えます。<tr />

于 2012-08-01T21:48:14.490 に答える