3

フローティングdiv（このdivを「A」と呼びます）を親div（これを「B」と呼びます）の右側に接続し、スクロール中にdiv Aを画面に表示したままにするHTML5/jqueryソリューションを探していますが、 div B の高さの上部または下部に当たります。画面に表示されたままのフローティング/絶対配置のソーシャル メディア ボタンを見たことがある場合 (正しい概念です)、フロートを div B の高さと同じ高さまたは低さに制限したいと思います。

以下は私が作った コンセプトアニメーションですConcept Animation

div Bを見ると、私の目標は、フローティングメニューを画面上で上下にスクロールして、右側に沿ってdiv Bの高さをスクロールし、div Bの上または下には移動しないようにすることです.

アドバイス/ヘルプ/コードスニップは大歓迎です。前もって感謝します。

4

1 に答える 1

1

さて、これが私が実装したスクリプトです。ずっとプラグインにしようと思っていたのに忘れがちですが、とても簡単にカスタマイズできます。

    $(window).scroll(function () {
            var ntMin = 130;
            var newTop = $(window).scrollTop();
            if (newTop <= ntMin){
                newTop = ntMin;
            }
            $("#navPane").stop()
                .animate({'top': newTop}, "slow");
    });

ここで何が起こっているかというと、WINDOW OBJECT にイベント ハンドラーを追加しているということです (なぜですか? この方法では、ページが完全に読み込まれる前に誰かがスクロールを開始すると、ページが終了するたびに移動する div が追いつくため、アニメーションはスムーズに保たれます。スタイリングの不具合にはなりません)。ntMin次に、移動する div を移動する最小距離値 (ウィンドウの上部から測定) に設定する変数 を宣言します。次に、変数 を宣言しnewTop、ページの現在のスクロール位置で初期化します。次に、div を移動する必要があるほどウィンドウが移動したかどうかを確認します。次に、アニメーションを実行します。

デモをできるだけ早くお送りします。最初に HTML 版を送信できるかどうかを確認してみます。

ご不明な点がございましたら、お知らせください。

編集：

わかりました。デモを送るだけでなく、ページを htm ページとして保存し、コンテンツを Lorem Ipsum に置き換え、結果を新しい開発サイトのページに追加しました (まだ完全ではありません。事前にお詫び申し上げます)。 ）。ここにデモへのリンクがあります。

なんらかの理由で、ロゴがサイトに表示されない権限の問題が発生しているようです (サイトはまったく完全ではありません)。ナビゲーションが本来よりも低く開始されるという小さな不具合が発生していますが、ページを移動するとすぐに正しい位置に戻ります。同じバグにより、本来よりも少し低く終了することもありますが、全体としては、依然としてその目的を果たしています。ご不明な点がございましたら、お気軽にお問い合わせください。幸運を祈ります。:)

 

更新: プラグインを作成する機会はありませんでしたが、必要なものの仕様を書きました。私が提供した仕様は、必ずしも最も単純な解決策を生み出すわけではないことに注意してください。これは意図的なものです。プラグインに変換する前に必要な他の機能を追加するために、スクリプトを簡単に記述し、テストし、カスタマイズ/拡張できるように設計しました。どうぞ：

  • （I）スライド要素の現在の（前の）位置を保持する変数を作成します
    • ウィンドウがスクロールするたびに、この値はコードの最後で更新されます
    • この値は、スクロールの方向を決定するために使用されます
  • (II) スライド要素の CSS 変更を管理する関数を作成する
    • この関数は、ウィンドウ スクロール ハンドラから呼び出されます。
    • この関数は値の配列を取ります { scrollTop, direction, topStop, bottomStop, ele }
      • ele は、スライド要素のセレクターになります
      • これらの値を保持する再利用されるオブジェクトを設計したい場合があります
      • これらの値と、スクロール関数で作成されたローカル変数を取ることができます
        • 一部の機能が複数回実行されるのを防ぐことができます
        • 長期的には物事をより簡単にすることができます
      • オブジェクトは、document.ready ハンドラーの変数に格納されます
    • 関数は要素を移動するかどうかを決定します
      • 要素の方向が「下」で、まだ (bottomStop - ele.height()) に達していない場合
      • bottomStop に到達した場合は移動しない (ele.css(top: scrollTop) を使用)
      • また、ele.css("top") が > その topStop であることを確認する必要があります。
    • 上方向は上記と逆
  • (III) ウィンドウのスクロール機能を作成します。
    • scrollTop の値を保持するローカル変数を作成する
    • ブール値の方向値を保持するローカル変数を作成する
    • scrollTop の値をスライド要素の前の位置と比較します
      • 値 scrollTop の方が大きい場合は、方向を「下」を示すブール値に設定します
      • それ以外の場合は、方向を「上」方向を示すブール値に設定します
    • II で作成した関数を呼び出す
于 2012-07-29T01:38:34.483 に答える