滚动时使用jquery更改背景位置

时间:2012-10-30 10:43:09

标签: javascript jquery background-position

尝试使用滚动位置更改正文背景位置。 背景图片具有以下设置:

 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;">

0 个答案:

没有答案