Question

我的网站上面有一个菜单，然后是横跨70％页面（横幅）的横幅，下面是页面的内容。在横幅中，我有一个覆盖整个窗口的jQuery幻灯片。我想将视差滚动添加到通过“空”横幅可见的幻灯片背景中。

我的设置就像幻灯片放映的背景是网站上所有其他内容之前的单独div，然后将其设置为'position：absolute'和'z-index：-100'。

因为我让背景的div跨越所有其他内容，所有内容都是视差滚动而不是背景...

那么如何制作单独的div视差滚动？

在JSFiddle查看我的演示。

简化HTML：

<body>
    <div id="parallax-bg"></div>
    <div id="menu"></div>
    <div class="banner"></div>
    <div class="content"></div>
</body>

简化CSS：

html {
    height: 100%;
    min-height:100%;
    margin: 0px;
    padding: 0px;
}
body {
    height: 100%;
    min-height:100%;
    min-width: 100%;
    padding: 0;
    margin:0;
    width: 100%;
    z-index:-100;
}
#parallax-bg {
    height: 100%;
    z-index:-100;
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    min-height:100%;
    min-width: 100%;
}
#menu {
    height: 100px;
    width: 100%;
}
.banner {
    width: 100%;
    height: 70%;
}
.content {
    width: 100%;
}

用于parallex滚动的脚本：

jQuery(window).scroll(function () {

    jQuery('#bg').css({
        'top': -(jQuery(this).scrollTop() / 2) + "px"
    });
});

单独div的视差滚动（带'position：absolute'和幻灯片背景）

0 个答案: