2

さまざまな種類の表示サイズで機能するページを設計しようとしています。現在、重要なコンテンツ (基本的に現在のステータスを示す小さな四角形) があり、相対的に配置されたコンテナー内に完全に配置されています。これにより、大画面のデバイスにページがロードされたときに望ましい動作が得られます。コンテンツは、意図した位置に「スクロールしなくても」表示されます。

ボックスが最初の画面の外に表示されるような小さな画面 (または、最大化されていないブラウザー) を備えたデバイスの場合、ユーザーが十分に下にスクロールするまで、ボックスをページの下部に表示する必要があります。ボックスを通常の位置に戻します。その時点で、その場所に戻ります。(はい、ユーザーが十分に下にスクロールすると、ページの上部からスクロールする必要があります。)

この動的効果は以前に見たことがあるので、間違いなく可能です。( http://googleblog.blogspot.com/では、まったく異なるものではないものが使用されています。) しかし、それはどのように行われるのでしょうか? 間違っているかもしれませんが、Javascript は使用されていないと思います。

明らかに、メディア クエリは目的の動作を取得しません。これにより、位置が固定される可能性がありますが、目的の方法で遷移するものではないためです。

4

1 に答える 1

0

これは JavaScript なしでは実行できず、jQuery を少し使用しても害はありません。

ざっくりこんな感じにします。

<div id="box"></div>

$(window).bind('scroll', function() {

    if($('#box').position().top >= $(window).height()) {    // if box is outside window do this
        // position box inside window
        $('#box').css({ top: /* pixels go here */ });
    } else if(/* box is inside window */) {

    }

});
于 2012-06-22T03:09:02.593 に答える