私のウェブサイトでこれをやろうとしています。ヘッダー画像がフェードアウトしている間にコンテンツがヘッダーの上をスクロールします（もちろん、ページの上部に戻っているときにヘッダー画像が再び表示されるようにしたいです）。私はJavascriptでこれを行うことができました。
<script>
var divs = $('.head');
$(window).scroll(function () {
if ($(window).scrollTop() < 20) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
</script>
このスクリプトは、1 回のスクロールで画像を消すだけです。画像が完全に消える前に、少なくとも 3 つの異なる不透明度レベルが必要です。同時にコンテンツは画像上をスクロールします（画像位置：固定）。このスクリプトでこれを行うことはできますか? または、これを行うには CSS トリック (不透明度付き) を使用する必要がありますか?
--
さて、これが私たちです（Capricornに感謝します！）：
<script>
var div = $('.head');
$(window).scroll(function(){
if($(window).scrollTop()>10) {
div.stop(true,true).fadeTo("slow", 0.75);
} if($(window).scrollTop()>150){
div.stop(true,true).fadeTo("slow", 0.4);
} if($(window).scrollTop()>200){
div.stop(true,true).fadeTo("slow", 0);
}
});
</script>
3回のスクロールでヘッダー画像をフェードさせることができました。しかし、3 つの新しい問題が発生しました.200px 未満でスクロールしている間、画像が (不透明度 0.4 から 0 に) 点滅し続け、これをスクリプトに追加する方法がわかりません (そう、Java の新機能)。また、スクロールして一番上に戻ると、画像は不透明度 0.75 のままです (不透明度なしで元に戻したい = 1)。
さらに、スクロール時にコンテンツがヘッダー画像を置き換えず、それらが同時に存在するという CSS または Javascript の問題です。このスクリプトのように の不透明度が変更され、fadeTo("slow", 0); のみが使用されます。-option 私のコンテンツは完全に表示されます。