jQuery固定要素プラグインscrolltofixed使用ガイド_jquery

少し前にウェブサイトを変更するときにこのプラグインを一度使用しました。スクロール バーがスクロールするときに上部のメニュー バーを固定する必要があります。これについても一般的に書きましたが、記事アドレス: jQuery プラグインの要素の位置を固定するという記事内でのみ言及しました。 この記事では改めてまとめていきます。

1.scrolltofixedプラグイン関数

ページがスクロールしても要素が表示されたままになるように、要素の位置を修正します。

II.scrolltofixed 公式アドレス

https://github.com/bigspotteddog/ScrollToFixed。公式アドレスには使用方法が記載されており、プラグインのプロパティとメソッドの説明は以下にあります。デモには詳細な使用例もありますので、ダウンロードしてご覧ください。

3.scrolltofixedの使い方

scrolltofixed プラグインには、トップ、サイドバー、または「ページ上の任意の要素を修正」することができる幅広い用途があります。他のプラグインと組み合わせて使用​​すると、非常に良い結果が得られます。スクロール バーが特定の位置に到達したことが検出されると、特定の要素が表示されます。テスト ケースでは、scrolltofixed プラグインをscrollto プラグインと一緒に使用します。具体的な効果は、以下の「テスト ファイル」で確認できます。

1. 参照ファイル

scrolltofixed プラグインは非常に簡単に使用でき、2 つの js を引用するだけで済みます。 1 つのファイルは jquery で、もう 1 つは、scrolltofixed プラグインに必要な js ファイルです。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-scrolltofixed.js"></script>

2.css スタイル ファイル。プラグインを使用するためにスタイル ファイルは必要ありませんが、固定位置の要素を定義する必要があり、要素には独自のカスタム スタイルが必要です。スタイル ファイルはここには掲載されていません。以下の「テスト ファイル」を参照してください。

3.js コード。初期化は 1 文で実行することも、必要に応じて初期化プロパティを設定することもできます。要素のスタイル、固定されたときに表示されるスタイル、どの要素に到達したか、固定された要素は固定されなくなった、など。公式デモを見ることができます。

//この記事では固定要素のみをテストし、デフォルトの属性を使用します
$('#operbox').scrollToFixed();

4. HTML を使用します。固定位置要素は HTML を使用する必要があります。以下に「テストファイル」が表示されます。

scrolltofixed プラグインをテストする場合、テスト ケースの効率を向上させるために、scrollto プラグインも使用して、指定された要素までスクロールします。
テスト環境：IE8ブラウザ、Chrome、Firefox。テスト結果:

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。