0

上部に粘着性のあるナビゲーションを備えた新しいサイトのデザインがあります。

問題ありません。

各セクションには、実際には単なる色付きのバーである見出しグラフィックがあります。各セクションを下にスクロールすると、そのセクションの色付きのバーがナビゲーションの下に表示されます。下にスクロールしていると、ナビはいわばがれきを集めています。

セクションが 5 つある場合、ページの一番下にいるとき、ナビゲーションの下に 5 つの色付きのバーが表示されます。

これほど簡単に達成できる例やプラグインはありますか?

c

4

1 に答える 1

1

説明を始める前に、私が作成した簡単なデモを見てみましょう。次に、私が行ったことについて説明します。

http://jsfiddle.net/4JUaK/1/

var bar_positions = [];
$.each($('.bar'), function () {
    bar_positions.push($(this).offset().top);
});

まず、バーをループして追加することで、バーの位置を格納する配列を作成しました。

var collected_bars = 0;
var debris_height = 20;
$(window).scroll(function () {

ここで行ったのは、後で使用するいくつかの変数を初期化しscroll()、ユーザーがスクロールするたびに起動される関数を作成したことだけです。

    var random_number = 0;
    if ($(window).scrollTop() + debris_height >= bar_positions[collected_bars]) {
        collected_bars++;
        debris_height += 20;
        random_number = Math.random() * 8 - 4;
        $('.bar' + collected_bars).css({
            'position': 'fixed',
            '-webkit-transform': 'rotate(' + random_number + 'deg)',
            'transform': 'rotate(' + random_number + 'deg)'
        });
    }

これが楽しいところです。scrollTop()条件は、位置 (およびナビゲーション バーと収集されたバーの追加の高さ) が最も近いバーの位置よりも大きいかどうかを確認します。最も近いバーは、collected_bars変数を利用して、配列の最初の要素を調べることで見つかります。

その位置を超える場合は、その変数に 1 を追加して、次のバーの下を探す必要があることを伝えます。debris_height次に、次の位置を適切に計算できるように、 に少し追加します。また、「収集」したバーに必要な CSS を適用します。に設定し、スタイルシートでとプロパティposition: fixed;を既に宣言しているので、目的の場所に移動するために必要なのはこれだけです。また、ランダムな回転を加えました...これをアニメートしてよりクールに見せることもできますが、それはお任せします。lefttop

このコード ブロックの後は、基本的に、今行ったことのバージョンのミラーです...位置が以前に収集されたバーの位置よりも小さくなった場合は、元の状態に戻してください!

さて、明らかに私はこれをかなり迅速に行ったので、少し荒いですが、これで十分であり、必要なものにクリーンアップできます...

私の例で取り上げなかった大きなことの 1 つは、次のとおりです。

バーを固定位置に変更すると、ページ内のスペースを占有しなくなり、すべてが上に移動します。私の例では、これに対応するために何もしていないので、位置比較は少しずれています。最善の解決策はpadding、要素がフローから取り出されたときにスペースを埋める何かを追加して、顕著な変化を防ぐことです。それ以外の場合は、これを何らかの方法で計算する必要があります。

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-11-03T05:26:01.050 に答える