CSS背景水平滚动

时间:2013-08-30 14:17:50

标签: html css

如何在垂直滚动页面时使页面背景水平滚动?

这是一个说明我的意思的工作示例。

http://www.hul.co.in/careers-jobs/

2 个答案:

答案 0 :(得分:1)

他们在jQuery中使用JavaScript(特别是script库)来完成这项工作。 我推荐使用jQuery,因为它正常化#34;浏览器供应商前缀属性。

这样的事情可以让你开始,

var lastTop = 0,
    top = 0;

$(window).scroll(function () {
    top = $(document).scrollTop();

    if (lastTop !== top) {
        // If it's scrolling vertically
        // change background's x coordinate
        $(this).animate({
            'background-position-x': top;
        }, 1);

        lastTop = top;
    }
});

答案 1 :(得分:0)

这与纯css不可能,你必须使用javascript。

如果你正在使用jQuery,你可以使用它:

只是基本的HTML标记:

<!-- HTML -->
<div id="background"></div>
<div id="content"> <!-- add some content here --> </div> 

CSS样式:

/* css */
#background {
    /* fixed position - aways on top of the screen */
    position: fixed;
    top: 0;
    left: 0;

    /* set repeat-x so it doesn't run off */
    background: url(http://dummyimage.com/3000x100/333/999.png&text=foobarfoobarfoobarfoobarfoobar) repeat-x;

    /* you MUST set width and height or it won't display */
    width: 100%;
    height: 100px;

    /* -1 to ensure it will always be in background */
    z-index: -1;
}

#content{
    width: 500px;
    margin: 0 auto;
    background: #b0b0b0;
}

JavaScript代码:

// JavaScript (using jQuery)
$(window).scroll(function () {
    // parse the value of current background position and add window.scrollY - vertical scroll (divide this for slower background scroll)
    var offset = parseInt($("#background").css("background-position-x")) + window.scrollY;
    $("#background").css("background-position", offset + "px 0px");
});

如果您希望查看此代码,请查看此jsFiddle

如果您想避免使用jQuery,我已将此相同的代码转换为纯js:jsFiddle