AffixはBootstrapの有用なコントロールであり、ブラウザのScrollbarの位置を監視し、常にページの可視領域にナビゲーションを保持できます。最初は、ナビゲーションはページ内の通常のストリーミングレイアウトであり、ドキュメント内の固定位置を占めていました。ページがスクロールされると、ナビゲーションは自動的に固定レイアウト（固定）になり、常にユーザーの視聴領域になりました。その使用について話しましょう。まず、その実装の原則を見てみましょう。ページ要素のクラス属性をリアルタイムで変更することで達成されます
最初に、affxi-top属性は、接続を適用する要素のクラスに自動的に追加されます。
ナビゲーションがページの上部に到達しようとしているようにスクロールバーがスクロールすると、接続トップが要素のクラスの接辞に変更されます。
スクロールバーをページの下部にドラッグすると、Affixは再びAffix-bottomに自動的に変更されます
上記のプロセスはコントロール自体によって完全に実装されており、介入する必要はありません。これらの州にCSSを書くだけです。
設定できる場合
.affix-top {Top：150px;}。それがどのように使用されるかを見てみましょう
1。データ属性を渡します
聴く必要があるページ要素にdata-spy = "fix"を追加するだけです。次に、オフセットを使用して、要素のオンとオフを決定します。
<ul data-spy = "affix" data-offset-top = "190"> <li> <a href = "＃one">チュートリアル1 </a> </li> <li> <a href = "＃two">チュートリアル2 </a>
ここで、データオフセットトップは、ページの上部から接尾辞トップの状態要素が配置されている位置です。ページの上部にスクロールするとき、「.Affix」スタイルを設定して、「トップ」値をリセットできます。
2。JavaScriptを通じて呼び出します
サンプルコードは次のとおりです。
$（ '＃mynav'）。
HTMLコードは次のとおりです（コアコードのみが表示されます）：
<ul id = "mynav"> <li> <a href = "＃one">チュートリアル1 </a> </li> <li> <a href = "＃two">チュートリアル2 </a> </li> <li = "＃3">チュートリアル3 </a>
上記はBootstrapでAffixの使用を導入したようですが、実際の使用プロセスでは、Scrollbarをドラッグすると、Affixを使用してページ要素の幅が変更され、乱雑なページレイアウトが発生することがわかります。したがって、次のような接辞を定義するCSSの幅を書き留めることが最善です。
.affix {width：250px;}このようにして、ウィンドウが十分に大きい場合に問題はありませんが、ウィンドウのサイズをドラッグして変更すると、レイアウトが再び台無しにされていることがわかります。この問題は長い間私を悩ませてきました。最後に、BOOTCSSのソースコードを分析することにより、Webサイトには、接辞要素を使用するすべてのクラスに「Hidden-Print」、「Hidden-XS」、「Hidden-SM」属性が追加されていることがわかりました。画面が要件を満たしていないときに、接辞を非表示にするために使用されます。使いやすさに影響しますが、いずれにせよレイアウトがきれいになることが保証されます。
上記は、ブートストラップでの接辞コントロールの使用と美しいレイアウトを維持する方法の詳細な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！