ブートストラップでは、Affix プラグインを使用して固定位置を設定できます。プラグインは、カスタム属性データを通じて任意の要素の位置を固定できます。構文は「"
#このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター
ブートストラップ位置決めを設定および修正する方法
固定位置決め -- 固定位置決めの宣言的トリガー
Affix プラグインは、任意の要素に対して固定位置決めを実行できます。より簡単な方法は、カスタム属性データ。これには主に 2 つのパラメータが含まれます:
1. data-spy: 要素が固定されていることを示す値の接辞。
2. data-offset: 90 などの整数値は、上部要素と下部要素の値が両方とも 90 ピクセルであることを意味し、これには data-offset-top と data の 2 つのメソッドが含まれます-オフセット-ボトム。
data-offset-top は、要素の上部からの距離を設定するために使用されます。たとえば、90 は要素が上から 90 ピクセルであることを意味します。ユーザーがスクロール バーを上から下にドラッグすると、スクロール距離が 90 ピクセルを超えると、接辞要素はスクロールされなくなり、要素の上部に固定されます。ブラウザウィンドウ。
data-offset-bottom は data-offset-top の逆です。
<div data-spy="affix" data-offset="90">affix元素</div>
ログイン後にコピー
具体的な使用方法は次のとおりです。
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
ログイン後にコピー
データオフセット値のメソッドを別途設定します。
<body data-spy="scroll" data-target="sidebarMenu">
ログイン後にコピー
ボディ内でスクロール監視を宣言する必要があることに注意してください。
rrreee
注、エフェクトはワイドスクリーン モードで表示してください。私のテストによると、宣言型スタイルを使用すると、たとえ data-offset-top の値が設定されていても無効になるため、スタイル内の接辞の先頭の値を data-offset の値と同じに設定する必要があります-上。 data-offset-bottom と同じです。
関連する推奨事項:
ブートストラップ チュートリアル
以上がブートストラップで固定位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
