さまざまな種類の表示サイズで機能するページを設計しようとしています。現在、重要なコンテンツ (基本的に現在のステータスを示す小さな四角形) があり、相対的に配置されたコンテナー内に完全に配置されています。これにより、大画面のデバイスにページがロードされたときに望ましい動作が得られます。コンテンツは、意図した位置に「スクロールしなくても」表示されます。
ボックスが最初の画面の外に表示されるような小さな画面 (または、最大化されていないブラウザー) を備えたデバイスの場合、ユーザーが十分に下にスクロールするまで、ボックスをページの下部に表示する必要があります。ボックスを通常の位置に戻します。その時点で、その場所に戻ります。(はい、ユーザーが十分に下にスクロールすると、ページの上部からスクロールする必要があります。)
この動的効果は以前に見たことがあるので、間違いなく可能です。( http://googleblog.blogspot.com/では、まったく異なるものではないものが使用されています。) しかし、それはどのように行われるのでしょうか? 間違っているかもしれませんが、Javascript は使用されていないと思います。
明らかに、メディア クエリは目的の動作を取得しません。これにより、位置が固定される可能性がありますが、目的の方法で遷移するものではないためです。