jquery - Jquery在div之间滚动淡入淡出

Question

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

我想要做的是首先隐藏所有 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();
     }
 });