ほぼ固定された背景画像ですか（nピクセルスクロールしてから固定）できますか？

Question

最後に私の個人用ドメインのサイトを設計することになりました。使用したい背景イメージに問題が発生しました。

画像はスカイラインですが、建物がページの上部から降りるように反転されています。逆さまのスカイラインの下には、スカイカラー（この場合は緑/黄/オレンジ）から白へのグラデーションがあります。

建物がページの約50％オフ（75pxと言う）になるまで、ページ全体が最初にスクロールすることを望みます。その時点で背景が固定され、テキストのみ（理想的にはヘッダーとボディ）それを超えてスクロールします。

実際、ページの背景は、ページの最上部にある高層ビルの上部になり、大部分は空白のグラデーションになります。

私のCSSスキルはかなり初歩的なものであり、JQueryのスキルは存在しません。私は物事を一緒にハッキングするのは楽ですが、それ以上のことはできないと感じます。残念ながら、私がGOOG/SOの検索で見つけた最も近いものは視差のスクロールに関連しています。これは正確には私が探しているものではありません。

提案がありますか？

Answer 1

これが可能だと思います。私はjQueryを使用します。ウィンドウ自体のスクロール位置を見てみましょう。スクロール位置が特定のしきい値より大きい場合は、スカイラインを現在の位置に固定します。それよりも小さい場合は、それを元に戻します。私はあなたがダイナミックに見えないように固定位置を動的に割り当てる必要があると思います。

$(window).scroll(function() { 
console.log($(window).scrollTop()); 
if ($(window).scrollTop() > 300) { 
    $(body).css(''); //reposition background image using 'top' 
} 
else { 
    $(body).css(''); //put background image back using 'top' 
} 

}）;

これがうまくいくのか、かわいいかどうかはわかりません。しかし、それはクールな効果になります。あなたはそれにリンクを投稿する作業を得る場合！