2

OK、ページの下にいくつかの div があります。ほとんどの場合、高さ: 1024px と幅: 100% の一般的な CSS を使用しています。これらの各 div には、バックストレッチを使用して設定されたフルスクリーンの背景画像があります。

私がやりたいことは、最初はすべての div を非表示にして、最初の 1 つだけを表示することです。次に、ページを下にスクロールすると、各 div がフェードインし、既存の div がフェードアウトし、スクロールアップするとその逆になります。

ご覧のとおり、既存の div をすべて高さ 1024 に設定したので、高解像度で画面の下部に空白の領域が表示されても問題ありません。

scrolltop() 関数を使用してみましたが、確実に機能しません。

4

2 に答える 2

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画像を作成し、それに応じて画像を設定します。

于 2013-03-06T07:01:53.930 に答える
0

このようなものを使用できます

$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('div1').fadeOut();
     }
    else
     {
        $('div2').fadeIn();
     }
 });
于 2013-03-06T05:47:44.623 に答える