CSS：ブラウザのビューポートよりも背の高い画像を固定

Question

#page divの背景画像に大きな画像（940x1210）があります。これはサイトのすべてのコンテンツを囲みます。写真は頭の写真なので、それはかなり馬鹿に見えるので、私はそれを繰り返さないように設定し、それを0,0に配置しました。

#pageで囲まれたコンテンツのサイズが1210pxより大きく、背景画像がスクロールするように設定されている場合、写真は表示外にスクロールされますが、固定されていると、ブラウザビューポートに最初に表示された画像の部分 - 上半分（固定された左上）または下半分（固定された左下）。

ここに質問があります：画像の高さ全体をスクロールして底に達するまで、背景画像を#page（または本文）の底に固定するにはどうすればよいですか？

Answer 1

ユーザーがスクロールするときに背景イメージの動作を変更するには、onscroll JavaScriptイベントを使用する必要があります。

先頭にバックグラウンド画像が添付されていて、スクロールするように設定します。ユーザーがスクロールするときに、画像の高さ以上にスクロールしたかどうかをテストします。直ちに、背景画像を固定位置に設定します。

次に、ユーザーが画像の高さよりも低い位置にスクロールバックした場合は、背景を再度スクロールするように設定します。