JQUERY は、ウィンドウのスクロール検索ボックスのドッキング効果を実装します (スクロール ドッキングと同様)_jquery

ページに大量のコンテンツを表示する必要がある場合、多くの人は問題を解決するためにページングを使用します。

ページング効果が非常に煩わしい場合があります。スクロール バーは間違いなくシンプルで効率的な方法です。ここでは、ユーザー エクスペリエンスを考慮して、Jquery を使用して「スクロール ドッキング」と同様の効果を実現しました。このようにして、コンテンツを下にスクロールすると、検索ボックスがウィンドウの上部に「ハング (ドッキング)」します。

この利点は、ユーザーがコンテンツを再フィルタリングする必要がある場合に、再度上にスクロールする必要がなく、いつでも条件を入力して検索できることです。

次は、この効果を実現するための私のアイデアです:
まず、非表示の検索ボックスをデザインします。この非表示の検索ボックスのスタイルとイベントは、表示されている検索ボックスのスタイルとイベントと同じです。
次に、非表示の検索ボックスの場所を「絶対」に設定します。
第三に、Jquery を使用して、スクロール バーのスクロール距離により、元々表示されていた検索ボックスが非表示になるかどうかを判断し、非表示の検索ボックスを上部に固定して表示します。

以下はこの効果のコードです:
フローティング検索ボックス HTML コード: (表示される検索ボックスはこれと同じですが、クラスが異なります。)

コードをコピーします コードは次のとおりです。

<テーブル class="flowsearch">
条件 1:




条件 2:




td class="condition ">

;

< /td>

フローティング検索ボックスこのスタイルと同じですが、固定位置を設定しないことを除きます)

コードをコピー

コードは次のとおりです: /*ドロップダウンボックス*/ .drop {

width: 175px;

}
/*フローティング検索ボックスのテーブル*/
#flowsearchdiv table
{
背景色: # 484343;
色: 白;
ボーダー上部: 2 ピクセルの白
}
/*フローティング検索ボックス*/
# flowsearchdiv
{
display:none ;
position:absolute;
left:217px;
}




コードをコピー

コードは次のとおりです:

//ウィンドウのスクロールを実現します。検索ボックスはスクロールしません$( function () { $(window).scroll(function ( ) { var top = $(this).scrollTop(); var flowSearch = $("#flowsearchdiv"); if (top - 36 < 0) {

//Float 検索ボックスは非表示になり、フェードインします。

flowSearch.css("display", "none")
} else {
flowSearch.css("表示", "ブロック");
トップ =
flowSearch.css("トップ",
}); >});


ここでは基本的に 効果が出ます。スクロール バーを下にスクロールすると、元の検索ボックスがページの表示範囲を超える場合、非表示の検索ボックスが表示されます。ユーザーの観点から見ると、検索ボックスはページの上部で停止するため、ユーザー エクスペリエンスは自明です。
レンダリング: