尝试在我的网站上执行此操作；内容在标题图像淡出时滚动到标题上（当然我希望标题图像在返回页面顶部时再次显示）。我已经设法用 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>
这个脚本只是让我的图像随着一个滚动而消失 - 在我的图像完全消失之前，我希望至少有 3 个不同的不透明度级别。同时内容在图像上滚动（图像位置：固定）。我可以用这个脚本做到这一点吗？或者我应该使用一些 CSS 技巧（不透明）来做到这一点？
--
好的，现在我们到了（感谢摩羯座！）：
<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 个滚动条淡化了我的标题图像。但是遇到了三个新问题。我的图像在滚动到 200 像素以下时不断闪烁（从不透明度 0.4 到 0），我无法弄清楚我应该如何将它添加到我的脚本中（是的，Java 的新功能）。而且，当我滚动回顶部时，我的图像保持在不透明度 0.75 （希望它在不透明度 = 1 的情况下返回）。
此外，CSS 或 Javascript 的问题是，当我滚动时，内容不会替换标题图像，并且它们同时存在。就像使用此脚本一样，它会更改 ' 的不透明度，并且仅使用 fadeTo("slow", 0); -option 我的内容完美显示。