5

いくつかのコードを統合し、現在使用しているカスタム JavaScript および jquery プラグインの量を最小限に抑えようとしています。

現在あるページには、次のようなグリッドがあります。

+--------------------+
|                    |
+--------------+-----+
|              | [A] |
|              |     |
|              |     |
|              |     |
+---------+----+-----+
|         |          |
+---------+----------+

div [A] が渡されたら、画面の上部に「貼り付ける」必要がありますが、コンテナー div を超えないようにする必要があります。この動作は、スティッキー サイドバーに沿ってかなり一般的なようです。

車輪の再発明を試みる前に、Bootstrap でこれを実装した人がいるかどうかをここで尋ねてみようと思いました。これを行う jQuery プラグインはいくつかありますが、私はすでに Bootstrap をロードしているので、ロード時間を最小限に抑えたいと考えています。

4

1 に答える 1

5

私は twitter-bootstrap ソリューションをあきらめ、見つけた最小かつ最も堅牢な jquery プラグインを使用しました。

jQuery ScrollToFixed = 縮小すると 3,941 バイトhttps://github.com/bigspotteddog/ScrollToFixed

私の実装は次のとおりです。

サイトの .js ファイルにキャッシュ:

function scrollwithin( scroller , marginTop ) {
    marginTop = typeof marginTop !== 'undefined' ? marginTop : 10;
    var scrollmax = $( '#' + scroller.attr('data-scrollmax') );
    scroller.scrollToFixed({
        marginTop: marginTop  ,
        limit: ( ( scrollmax.offset().top + scrollmax.outerHeight() ) - scroller.outerHeight() )
    });
};

必要に応じて、次のように呼び出します。

<div>
   <div id="a">
       <div id="a-scrollwithin">Long Column</div>
       <div id="a-scroller" data-scrollwithin="a-scrollwithin">Scrolling element</div>
   </div>
</div>
<script>
    $(document).ready(function() {
        scrollwithin($('#a-scroller'),10);
    }
<script>
于 2012-12-06T19:04:08.733 に答える