1。トランジション(フィルター)
基本的なサポートされたコンポーネントとして、他のコンポーネントによって複数回参照されます。ブラウザに従ってトランジションをサポートする機能を実装し、アニメーションの最終イベントをバインドします。
最初:要素を作成します。
次に:この要素でサポートされているトランジションアニメーション名の概要
移行実装のスキルは、主にjQueryのイベントオブジェクトを書き換えることであり、コードは次のとおりです。
$(function(){$ .support.transition = transitionEnd()if(!$。support.transition)return $ .event.event.special.bstransitionEnd = {bindtype:$ .support.transition.end、delegateType:$ .support.transition.end、under、hander(e)。{e.targe){e.targe) e.handleobj.handler.apply(this、arguments)}}})2。Affix(自動フローティングポジショニング)
1。ターゲット:パラメーターは、その位置決めリファレンスノード(スクロールバーを生成する親コンテナオブジェクトである必要があります)を示し、デフォルトはウィンドウです
2。データオフセットによって設定された上部と下の値は、式の計算にのみ使用され、CSSには設定されません。
3。3種類のポジショニングスタイル:
3.1。 Affix-Top:ページの上部に到達するときに追加されるスタイル
3.2。 fix:ページの中央に追加されるスタイル
3.3。 abitix-bottom:ページの下部に追加されるスタイル
4。処理式:
4.1。上:トラゲットの巻物棒の高さ(スクロールトップ)<要素の上位置からの距離(オフセット)(最初の判断)
4.1.1。スクロールトップは次のように設定されています:要素自体によって上位に配置された上部(要素の元のポイントからの距離は現在、ドキュメントから配置されています)(初めてではありません)
4.2。 getPinnedOffset:要素の上部ターゲットスクロールバーを貼り付ける上部を取得します
4.3。下:底部が最初に配置されるときの要素が初めてである場合、底部はターゲットスクロールバーの高さ +ターゲット要素の高さです> =ドキュメント全体の高さスクロールバーの高さが下から要素に付着します
4.3.1。初めてではない場合は、ボトムポジショニングです
1)オフセット(要素の上部位置からの距離)が空でない場合、ターゲットの最上部 + getPinnedOffsetの値>現在上部に配置されている粘着性要素の値
2)オフセットトップが空の場合、ターゲットの上部 +ターゲット要素の高さ>ドキュメントの高さの高さが底に付着します
4.固執する要素を変更できる唯一のトップは次のとおりです。ドキュメントの高さ - 固定要素の高さ - 底からの固定要素の高さ
5。ピットが嘘をつく場所:
1)上部と下部を一緒に使用すると、競合が発生します。理由:
Affix-bottom、つまり、ページの下部に到達すると、Bootstrapはオフセットを使用して最上位値を設定し、位置を追加します。要素に相対値を追加します。
理由:インラインスタイルの相対セットは、クラスの固定スタイルをオーバーライドします
6。概要
1)それは最高の状況では良いことであり、あなたは一番下の状況で自分自身を手動制御を追加する必要があります
2)Affixコントロールを適用するときは、少なくとも接着スタイルを自分で書き直して、粘着性バーの位置を制御します。
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください:Bootstrap Learningチュートリアル
この一連のチュートリアルは、Bootstrap Basic Tutorials Special Topics、Click to Learnのようにコンパイルされています。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。