Question

尝试在我的网站上执行此操作;当标题图像淡出时，内容在标题上滚动（当然我希望标题图像在页面顶部返回时再次显示）。我已经设法用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 -trick（具有不透明度）来做到这一点？

-

好的，我们现在就在这里（感谢摩羯座！）：

        <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个卷轴淡化我的标题图像。但是有三个新问题..我的图像一直在闪烁（从不透明度0.4到0），同时滚动到200px以下，我无法弄清楚我应该如何将它添加到我的脚本（是的，用Java新）。而且，当我滚动回到顶部时，我的图像保持不透明度0.75（想要它没有不透明度= 1）。

此外，CSS或Javascript的问题是当我滚动时，内容不会替换标题图像，并且它们同时存在。就像这个脚本一样，它改变了不透明度，只有fadeTo（“慢”，0）; -option我的内容完美展示。

Answer 1

尝试用数字设置持续时间。

fadeOut(2000)

API

Answer 2

您可以使用当前的脚本执行此操作。

如果分支用于不同的滚动位置，则再添加两个，例如 scrollTop（）＆lt; 50 和 scrollTop（）＆lt; 80 而不是淡入或淡出标题完全使用jQuery's fadeTo function。

网站内容滚动淡出的标题

2 个答案: