尝试在我的网站上这样做;标题图像淡出时内容在标题上滚动(当然我希望标题图像在返回页面顶部时再次显示)。我已经设法用 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); -选项我的内容完美显示。
最佳答案
关于javascript - 网站内容在褪色的标题上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19607512/