ブートストラップは毎日追加のナビゲーション (Affix) プラグインを学習する必要がある_JavaScript スキル
Affix プラグインを使用すると、
プラグインの機能を個別に参照したい場合は、affix.js を参照する必要があります。
1. 使用方法
Affix プラグインは、データ属性または JavaScript 経由で使用できます。
1. data 属性を介して: 追加のナビゲーション (Affix) 動作を要素に追加する必要がある場合は、監視する必要がある要素に data-spy="affix" を追加するだけです。オフセットを使用して、要素のロックと移動をいつ切り替えるかを定義します。
2. JavaScript を使用: JavaScript
を使用して要素に追加のナビゲーション (Affix) を手動で追加できます。
2. CSS による配置
Affix プラグインを使用する上記のどちらの方法でも、CSS を介してコンテンツを配置する必要があります。 Attached Navigation (Affix) プラグインは、.affix、.affix-top、および .affix-bottom という特定の状態を表す 3 つのクラスを切り替えます。これら 3 つの状態に独自の CSS を設定するには、以下の手順に従ってください (このプラグインに依存せずに)。
1. プラグインは最初に、要素が先頭の位置にあることを示す .affix-top を追加します。現時点では CSS の位置決めは必要ありません。
2. 追加ナビゲーション (Affix) が追加された要素をスクロールして過ぎると、実際の追加ナビゲーション (Affix) がトリガーされる必要があります。現時点では、.affix は .affix-top を置き換え、position:fixed を設定します (Bootstrap の CSS コードによって提供されます)。
3. 下部オフセットが定義されている場合、スクロールがこの位置に到達すると、.affix を .affix-bottom に置き換える必要があります。オフセットはオプションであるため、オフセットを設定するには適切な CSS も設定する必要があります。この場合、必要に応じて、position:Absolute; を追加します。
3. オプション
一部のオプションはデータ属性または JavaScript を介して渡されます。オプションは以下の表にリストされています:
4. 例
アンカー機能を実装するために、追加のナビゲーションが画面上のどこかに貼り付けられます。
1. 基本的な例
<body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron" style="height:150px"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150"> <li class="active"> <a href="#section-1">第一部分 </a> </li> <li> <a href="#section-2">第二部分</a> </li> <li> <a href="#section-3">第三部分</a> </li> <li> <a href="#section-4">第四部分</a> </li> <li> <a href="#section-4">第五部分</a> </li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p> ... </p> <h2 id="section-2">第二部分</h2> <p> ... </p> <h2 id="section-3">第三部分</h2> <p> ... </p> <h2 id="section-4">第四部分</h2> <p> ... </p> <h2 id="section-5">第四部分</h2> <p> ... </p> </div> </div> </div>
2. ナビゲーションの CSS 部分
ul.nav-pills {
width: 200px;
}
ul.nav-pills.affix {
top: 30px;
}
//JavaScript 代替 data-spy="affix" data-offset-top="125"
$('#myAffix').affix({
offset : {
top : 150
}
})
デフォルトで上部を使用しますが、もちろんデフォルトで下部にすることもできます。この配置方法は、CSS を通じて直接配置されます。
//设置成 bottom
ul.nav-tabs.affix-bottom {
bottom: 30px;
}
//设置成 bottom
$('#myAffix').affix({
offset : {
bottom : 150
}
})
Affix には次のような複数のイベントが含まれています:
//其他雷同
$('#myAffix').on('affixed-top.bs.affix', function() {
alert('触发！');
});
詳細については、ブートストラップ学習チュートリアル
を参照してください。以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1319
25
1269
29
1248
24
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
JavaScript：Web言語の汎用性の調査
Apr 11, 2025 am 12:01 AM
JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）
Apr 11, 2025 am 08:22 AM
この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）
Apr 11, 2025 am 08:23 AM
私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
