ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブートストラップで固定位置を設定する方法

ブートストラップで固定位置を設定する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2022-05-06 15:26:553362ブラウズ

ブートストラップでは、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 と同じです。

ブートストラップで固定位置を設定する方法

関連記事