Question

好的，所以我在页面上有几个div，主要是高度常见的CSS：1024px和宽度：100％。这些div中的每一个都使用backstretch设置全屏背景图像。

我想要做的是首先隐藏所有div，只显示第一个div - 然后当你向下滚动页面时，我希望每个div淡入现有的div淡出，反之亦然起来。

正如你所看到的，我已经将现有的div设置为1024的所有高度，所以我不介意你是否可以在更高分辨率的屏幕底部看到一个空白区域。

我尝试过使用scrolltop（）函数，但它无法可靠地工作。

Answer 1

尝试以下内容

<script type="text/javascript">
$(document).ready(function(){
    $(document).scroll(function() {
        var main = Math.min(0.5 + 0.4 * $(this).scrollTop() / 3000, 0.9);
        var change = Math.round(main * 255);
        $("body").css('background-color', 'rgb(' + change + ',' + change + ',' + change+ ')');
    });
});

</script>

有关背景

var pW = $(this).scrollTop();
$(this).css('background-position', '0% ' + parseInt(-pW / 10) + 'px');

创建精灵css图像并相应地设置图像。

Answer 2

你可以使用这样的东西

$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('div1').fadeOut();
     }
    else
     {
        $('div2').fadeIn();
     }
 });

Jquery在div之间滚动淡入淡出

2 个答案: