0

スクロール位置でボディの背景位置を変更しようとしています。背景画像には次の設定があります。

 background: #fff url(images/bg.png) center 100% no-repeat; background-attachment:fixed;

そのページには高さ 120px のフッターがあります。スクロールがマウスホイールまたはスクロールバーでフッターに達したときに、ボディの背景位置 (y 軸) を変更しようとしています。

編集：

誰かが「固定された」背景の外にフッターを作成する必要がある場合に備えて、マウスホイールとバーの両方で機能するようにしました。

$(window).scroll(function() {
        var def_bg_pos = 300;
        var footer = $(document).height() - 120; // footer height

        if($(window).scrollTop() + $(window).height() > footer) {
            var counter = ($(window).scrollTop() + $(window).height()) - footer;
            $('body').css('background-position', 'center '+ ((counter * -1) - def_bg_pos) + 'px');
        }
        else
            $('body').css('background-position', 'center -'+def_bg_pos+'px');
    });

<body style="background: #fff url(images/bg.png) center -300px no-repeat; background-attachment:fixed;">
4

0 に答える 0