ホームページ  >  記事  >  ウェブフロントエンド  >  fixSidebar 導入と修正 log_html/css_WEB-ITnose

fixSidebar 導入と修正 log_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:49:081501ブラウズ

fixSidebar は私が書いたサイドバー固定ウィジェットで、主にメインコンテンツが長い場合にサイドバーを表示し続けるために使用されます。

Githubアドレス https://github.com/iRuxu/iRuxu.ui/tree/master/fixSidebar

サンプルアドレス http://www.jx3pve.com/macro

この全体の理由執筆は、MOOC で Yuan Ren のコースを見て書きたかったのですが、機能をいくつか改良しました。

使用法

fixSidebar(selector,top,bottom,triggerScroll)

fixSidebar('sidebar',30,80,100)

パラメータの説明

selector は jQuery に渡されるセレクターです。そうでない場合は関数を終了します。直接グローバル JS ファイルにロードするだけです。

top は渡された先頭位置です。固定パネル ナビゲーションまたはユーザー バーがある場合、値が渡されない場合は 0 になります。

bottom

は受信時のボトム位置です。グローバルボトムナビゲーションなどがある場合は、この値をボトムバーの高さよりもわずかに大きく設定する必要があります。値が渡されない場合は 0 になります。

triggerScroll

はv0.3で新しく追加されました。その際、プライベートプロジェクトのページにもヘッダーバナーがあったので、必要に応じてこのように修正がトリガーされたときの値を設定することもできますページは 250 以降にトリガーされ始めます。 デフォルトで、ページ内の実際の水平座標の自動決定が組み込まれています。サイドバーの長さがページの長さより短い場合、デフォルトでは上を基準に位置が計算されます。サイドバーの長さがページの長さより長い場合は、下を基準に位置が計算されます。

最近のコピー列の適用では、スライド スクロールの存在により、いくつかのスクロール例外が発生することがわかりました。長い間考えた結果、スライド オーバーフローの BFC 管理が原因であることがわかりました。最後の解決策は、受信セレクターのオーバーフローを設定することでした。これは、自身で管理する必要があります。この項目はv0.4で機能に自動追加されており、追加のCSS設定は必要ありません。

さて、最後に、より良い提案があれば、フィードバックもいただけます~

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。